EN EN

Показать / скрыть данные в поле с паролем на чистом JavaScript

Как на чистом js выполнить функции показа и скрытия введенных данных в поле с паролем

⬅️ Вернуться к статьям
Дата публикации AccelLoad
6 июля 2022
Количество просмотров AccelLoad
93
Теги AccelLoad
JavaScript
JS
type="password"
Показать / скрыть данные в поле с паролем на чистом JavaScript

<div class="passBlock">
    <div class="passEye">
    	<span class="eye"></span>
        <input class="pass" type="password" name="new_password" placeholder="пароль" maxlength="50" value="" autocomplete="off"/>
    </div>
    <div class="passEye">
    	<span class="eye"></span>
        <input class="pass" type="password" name="new_password_confirm" placeholder="подтвердите пароль" maxlength="50" value="" autocomplete="off"/>
    </div>
</div>

<script>
	var passBlock = document.querySelector('.passBlock'),
			passEye = passBlock.querySelectorAll('.passEye');

	for (var i = 0; i < passEye.length; i++) {

		const eye = passEye[i].querySelector('.eye'),
			  pass = passEye[i].querySelector('.pass');
		eye.addEventListener("click", function () {
			if (pass.getAttribute('type') === 'password') {
				pass.setAttribute('type', 'text');
				eye.classList.add('view');
			} else {
				pass.setAttribute('type', 'password');
				eye.classList.remove('view');
			}
		});

	}
</script>

Скролл вверх