Показать/скрыть пароль

Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это можно на jQuery или чистом JS.

<div class="password">
	<input type="password" id="password-input" placeholder="Введите пароль" name="password">
	<label><input type="checkbox" class="password-checkbox"> Показать пароль</label>
</div>
HTML
$('body').on('click', '.password-checkbox', function(){
	if ($(this).is(':checked')){
		$('#password-input').attr('type', 'text');
	} else {
		$('#password-input').attr('type', 'password');
	}
}); 
JS

Результат:

<div class="password">
	<input type="password" id="password-input" placeholder="Введите пароль" name="password">
	<a href="#" class="password-control">Показать пароль</a>
</div>
HTML
$('body').on('click', '.password-control', function(){
	if ($('#password-input').attr('type') == 'password'){
		$(this).html('Скрыть пароль');
		$('#password-input').attr('type', 'text');
	} else {
		$(this).html('Показать пароль');
		$('#password-input').attr('type', 'password');
	}
	return false;
}); 
JS

Результат:

<div class="password">
	<input type="password" id="password-input" placeholder="Введите пароль" name="password">
	<a href="#" class="password-control"></a>
</div>
HTML
.password {
	position: relative;
}
.password-control {
	position: absolute;
	top: 11px;
	right: 6px;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(/view.svg) 0 0 no-repeat;
}
.password-control.view {
	background: url(/no-view.svg) 0 0 no-repeat;
}
CSS
$('body').on('click', '.password-control', function(){
	if ($('#password-input').attr('type') == 'password'){
		$(this).addClass('view');
		$('#password-input').attr('type', 'text');
	} else {
		$(this).removeClass('view');
		$('#password-input').attr('type', 'password');
	}
	return false;
});
JS

Результат:

<div class="password">
	<input type="password" id="password-input" placeholder="Введите пароль" name="password">
	<a href="#" class="password-control" onclick="return show_hide_password(this);"></a>
</div>
HTML
function show_hide_password(target){
	var input = document.getElementById('password-input');
	if (input.getAttribute('type') == 'password') {
		target.classList.add('view');
		input.setAttribute('type', 'text');
	} else {
		target.classList.remove('view');
		input.setAttribute('type', 'password');
	}
	return false;
}
JS

Результат:

14.11.2019
42015

Комментарии

, чтобы добавить комментарий.

Другие публикации

Сгенерировать пароль на JS
Небольшая JavaScript функция для генерации пароля...
4158
0
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
21991
+25
Select с ссылками
По спецификации HTML в option нельзя вставить ссылку, если все-таки её туда вставить, то работать она не будет. В таких случаях можно сделать перенаправление браузера по клику на JS или имитацию...
11772
+4
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
27785
+10
Селект с чекбоксами
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все сбрасывается. В место него можно использовать чекбоксы в выпадающем списке.
20881
+6
Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
129339
+19