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

14.11.2019

102182

Чтобы включить отображение пароля в поле 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');
	}
});

Результат:

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

<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;
});

Результат:

Показать пароль по иконке

<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;
});

Результат:

Без jQuery

<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;
}