Конфидициальность на сайте является важной частью, особенно когда речь доходит до персональных данных, сегодня я хочу рассказать, о маленьком фокусе, а именно как создать кнопку показывающую и скрывающую пароль в поле ввода при помощи jQuery и Bootstrap. Bootstrap Show Password-это плагин jQuery, который позволяет посетителю переключать видимость текста поля ввода пароля, щелкнув значок/флажок переключения. Иногда такой прием необходим, когда у пользователя возникают трудности с авторизацией и нужно узнать пароль.

 

 

Если вы хотите использовать уже готовые шаблоны, тогда можете просмотреть бесплатные шаблоны и не только от наших постоянных партнеров, где есть много интересного и с техподдержкой:

Шаг 1. HTML

Для начала подключите boostrap framework для вашей страницы сайта, соблюдайте правильность пути:

Включите плагин boostrap show password после библиотеки jQuery javascript:

Теперь создаем поле ввода пароля на странице с помощью следующей разметки:

Устанавливаем checkbox для переключения видимости текста пароля:

Как таковых стилей у нас не будет, по этому мы пропускаем этот шаг, и двигаемся дальше.

Шаг 2. JS

Теперь нам необходимо инициализировать плагин, делаем мы это в странице где у нас будет пароль с помощью следующего кода:

По умолчанию у нас будут установлены следующие значения, но вы можете легко их изменить:

Включите такую маленькую опцию в свой сайт, и думаю, она предоставит немного удобности посетителям вашего сайта.

Вот и все. Готово!