Init HTML

Bài viết sử dụng Bootstrap 3 để demo, demo bên dưới.

HTML

Mình sử dụng form-control-feedback để hiển thị biểu tượng con mắt. Bạn có thể tự tùy chỉnh theo nhu cầu nhé.

<div class="form-group has-feedback">
    <input type="password" class="form-control" id="password" placeholder="Nhật mật khẩu...">
    <span class="glyphicon glyphicon-eye-close form-control-feedback show-hide-button"></span>
</div>

CSS

Để nút con mắt có thể bấm được.

.show-hide-button {
    cursor: pointer;
    pointer-events: all;
}

jQuery

Xử lí đơn giản như sau.

<script type="text/javascript">
	$(document).ready(function() {
		$('.show-hide-button').click(function() {
			if ($('#password').attr('type') == 'password') {
				$('#password').attr('type', 'text').focus();
				$(this).removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
			} else {
				$('#password').attr('type', 'password').focus();
				$(this).removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
			}
		});
	});
</script>

Chúc các bạn thành công!