Введение
На многих сайтах мы вводим информацию в форму, чтобы зарегистрироваться или что-то отправить. Когда вводим,
вместо текста нам показываются «кружочки», и появляется кнопка «показать пароль». Как же сделать такую же кнопку на своем сайте? Легко!
Нужно подключить плагин 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. После этого баг пропадет.
На этом все, друзья. До скорых встреч!
Автор данного блога. Веб-разработчик. Фрилансер. Создаю крутые адаптивные сайты. Портфолио на https://maxgraph.ru/
Добавляйтесь в друзья Вконтакте! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика :)