В последнем проекте мне потребовалось реализовать переключатель, при клике на который будет показываться или скрываться пароль в соответствующем поле ввода пароля. Для решения, я накидал простой и небольшой код на jQuery, которым я хочу поделиться с вами в этом посте…
JavaScript
Для начала, подключаем jQuery и в отдельном файле пишем следующий код, который потом вы должны будете подключить на своей странице:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
(function($) { $.toggleShowPassword = function(options) { var settings = $.extend({ field: '#password', control: '#toggle_show_password', }, options); var control = $(settings.control); var field = $(settings.field) control.bind('click', function () { if (control.is(':checked')) { field.attr('type', 'text'); } else { field.attr('type', 'password'); } }) }; }(jQuery)); |
Теперь для работы этого куска кода вам необходимо будет вызывать следующую конструкцию:
|
1 2 3 4 |
$.toggleShowPassword({ field: '.bbq_license', // класс поля с паролем control: '.bbq_license_toggle' // класс переключателя }); |
HTML
Напоследок остается добавить соответствующую HTML разметку и можно спокойно пользоваться:
|
1 2 |
<input class="bbq_license" name="bbq_license_key" type="hidden" value="Пароль"> <input class="bbq_license_toggle" type="checkbox"> <span>Показать пароль</span> |