Как сделать показ/скрытие пароля на форме сайта?

Введение

На многих сайтах мы вводим информацию в форму, чтобы зарегистрироваться или что-то отправить. Когда вводим,
вместо текста нам показываются «кружочки», и появляется кнопка «показать пароль». Как же сделать такую же кнопку на своем сайте? Легко!

Нужно подключить плагин passfield.js (ссылку прикреплю к посту ниже). Документация — passfield.js

1
2

<link rel="stylesheet" href="css/passfield.css">
<script src="js/passfield.min.js"></script>

<link rel="stylesheet" href="css/passfield.css">
<script src="js/passfield.min.js"></script>

После этого нужно привязаться к input с type=»password»

1
2
3
4
5

$("input[type=password]").passField({ 
        showGenerate: false, 
        showWarn: false, 
        showTip: false 
    });

$("input[type=password]").passField({ 
        showGenerate: false, 
        showWarn: false, 
        showTip: false 
    });

Плагин подключен ко всем инпутам с типом password. Остается лишь прочесть документацию и внести некоторые изменения в инициализацию (как вам нужно), а так же внутри файла passfield.min.js можно поменять картинки (кнопки) показа\скрытия.

ВАЖНО! Примечание.

У плагина выявлен небольшой косячок, который мешает адекватной работе. При наведении на кнопку показа она вечно дергается. Но и это поправимо, для этого заходим в passfield.css и добавляем кое-что:

а именно display: block !important. После этого баг пропадет.

На этом все, друзья. До скорых встреч!

Метки: passfield, безопасность, пароль