Поле для пароля
Поле для пароля — обычное текстовое поле, но отличается от него тем, что все вводимые символы отображаются звездочками, точками или другими знаками (это зависит от браузера). Поле предназначено для того, чтобы никто не подглядел вводимый пароль.
Синтаксис создания следующий.
Атрибуты совпадают с атрибутами текстового поля и перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| size | Ширина поля с паролем, которая определяется числом звездочек моноширинного шрифта. |
| maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут опустить, то можно вводить строку длинее самого поля. |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Начальный текст, который выводится в поле. Этот текст не отображается и заменяется звездочками. |
Создание поля для пароля показано в примере 1.
Пример 1. Поле с паролем
Поле с паролем В результате получим следующее (рис. 1).
Рис. 1. Вид поля с паролем в браузере Chrome
Показать и скрыть пароль в поле ввода
Безусловно, что конфиденциальность на интернет ресурсе или блоге идет как самая или одна из самых важных аспектов, особенно в том случай, когда пользователь защищает персональные данные, которые требуются при регистрации на сайтах. Вот как раз в этом небольшом мануале вы узнаете немного больше про безопасность и функций. А точнее, это как правильно все выставить, включая кнопку, что будет показывать скрывающий, что производился при вводе.
В большинстве такой трюк необходим на сайтах, в тот случай, это когда у пользователя не получается зайти под своим логином, где просто он не правильно вписывает пароль, а здесь вы написали и автоматически проверили, где при нажатии вместо точек появятся знаки.
Показать или скрыть пароль при помощи JQuery
Произвести показа пароля с помощью чекбоксу
Здесь идет стандартная форма, только функция находится за рамкой.
.konid-nusial <
width: 295px;
margin: 0 auto;
padding: 14px;
>
#vekodnaya-prokhodna <
width: 100%;
padding: 6px 0;
height: 28px;
line-height: 40px;
text-indent: 5px;
margin: 0 0 12px 0;
border-radius: 3px;
border: 1px solid #888383;
font-size: 18px;
>
$(‘body’).on(‘click’, ‘.apavolku-galocksed’, function() <
if ($(this).is(‘:checked’)) <
$(‘#vekodnaya-prokhodna’).attr(‘type’, ‘text’);
> else <
$(‘#vekodnaya-prokhodna’).attr(‘type’, ‘password’);
>
>);
Это касается только того пользователя, который регистрируется на сайте или уже был ранее зарегистрирован и хочет зайти под своим логином, где прописывает пароль, и автоматически проверяет его, это правильно он написал или нет. Так как некоторые изначально не правильно напишут, что их перекидывает, где они снова все заполняют.
Произвести показ пароля по клику иконке
.kedsanud <
width: 298px;
margin: 15px auto;
position: relative;
>
#kapavolsu-salockedun <
width: 100%;
padding: 5px 0;
height: 30px;
line-height: 40px;
text-indent: 10px;
margin: 0 0 15px 0;
border-radius: 5px;
border: 1px solid #999;
font-size: 18px;
>
.kodnaya-prokhod <
position: absolute;
top: 11px;
right: 6px;
display: inline-block;
width: 20px;
height: 20px;
background: url(http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/pekugedsan.svg) 0 0 no-repeat;
>
.password-control.view <
background: url(http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/dsamudulas.svg) 0 0 no-repeat;
>
$(‘body’).on(‘click’, ‘.kodnaya-prokhod’, function() <
if ($(‘#kapavolsu-salockedun’).attr(‘type’) == ‘password’) <
$(this).addClass(‘view’);
$(‘#kapavolsu-salockedun’).attr(‘type’, ‘text’);
> else <
$(this).removeClass(‘view’);
$(‘#kapavolsu-salockedun’).attr(‘type’, ‘password’);
>
return false;
>);
Здесь также нужно выставить библиотеку, которую можно взять в начале статьи, ведь она идет и на этот вариант.
Показать пароль по ссылке
.amilopad <
width: 297px;
margin: 0 auto;
padding: 15px;
>
#pesacu-gdsaned <
width: 100%;
padding: 6px 0;
height: 28px;
line-height: 40px;
text-indent: 5px;
margin: 0 0 12px 0;
border-radius: 3px;
border: 1px solid #888383;
font-size: 18px;
>
$(‘body’).on(‘click’, ‘.ksadevu-kilasuda’, function() <
if ($(‘#pesacu-gdsaned’).attr(‘type’) == ‘password’) <
$(this).html(‘Скрыть пароль’);
$(‘#pesacu-gdsaned’).attr(‘type’, ‘text’);
> else <
$(this).html(‘Показать пароль’);
$(‘#pesacu-gdsaned’).attr(‘type’, ‘password’);
>
return false;
>);
Где уже сам веб разработчик уже самостоятельно может выставить шрифт под функцию открытия. Где аналогично в начале статьй указана библиотека, она также участвует при установке, а вот следующий вариант идет без библиотек.
Показать пароль без jQuery
.udasamnelab <
width: 320px;
margin: 15px auto;
position: relative;
>
#usedabun-kasdenum <
width: 100%;
padding: 6px 0;
height: 28px;
line-height: 40px;
text-indent: 5px;
margin: 0 0 12px 0;
border-radius: 3px;
border: 1px solid #888383;
font-size: 18px;
>
.podsanu-gesamilod <
position: absolute;
top: 11px;
right: 6px;
display: inline-block;
width: 20px;
height: 20px;
background: url(http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/dsareqab.svg) 0 0 no-repeat;
>
.podsanu-gesamilod.view <
background: url(http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/loxanetased.svg) 0 0 no-repeat;
>
function show_hide_password(target) <
var input = document.getElementById(‘usedabun-kasdenum’);
if (input.getAttribute(‘type’) == ‘password’) <
target.classList.add(‘view’);
input.setAttribute(‘type’, ‘text’);
> else <
target.classList.remove(‘view’);
input.setAttribute(‘type’, ‘password’);
>
return false;
>
Это один из всех вариантов, где не нужно подключать библиотеку, так как все корректно работает без нее, Но и по дизайну несколько слов, что здесь он по сути не нужен, так как такие формы в основной своей стилистике всегда представлены в стандартном виде.
Как скрыть пароль html
Довольно часто бывает необходимость добавить некий функционал полю ввода. Например — срыть / показать пароль пользователю, при вводе данных. Это значительно облегчает введение данных, особенно в случаях неисправности клавиатуры пользователя (западают кнопки, не пропечатываются, или не работает Caps или Shift.В общем, вещь не только привлекательная, но и порой, даже нужная!
В интернете вы найдете массу различных способов, как это сделать, но они, как правило, все написаны с библиотекой jQuery. Подключать библиотеку только для этого, бывает излишним, а переписывать нужные функции отдельно — трудозатратно, поэтому я решил написать код на чистом JavaScript.
Без долгих предисловий.
Рассмотрим вариант самого простого функционала — просто показать / скрыть пароль кликом на кнопку:
Вариант 1:самый простой.
Меняется только надпись на кнопке.
В файле HTML ничего особенного. Просто поле ввода пароля и кнопка. Им добавлены идентификаторы — id , для того, чтобы можно было с ними работать при помощи JavaScript.
JavaScript код я не стал выносить в отдельный файл и записал его здесь же.
Здесь мы получаем доступ к полю ввода и кнопке. Сохраняем их в глобальные переменные для того, чтобы каждый раз по клику не получать доступ — что является ресурсно затратной операцией.
На кнопку вешаем событие — click и запускаем функцию.
Внутри функции мы проверяем значение атрибута type у элемента input . Если это password , то мы меняем его на атрибут text , и наоборот.
Заодно и поменяли одержимое (название) кнопки button .
Можно это не делать, если не хотите добавлять достаточно затратную операцию .innerHTML . Для этого достаточно удалить код отмеченный красным.
Ниже полностью код файла index.html
Document Enter the Password:
Вариант с иконкой.
Смена надписи на кнопке и иконки в любой части кода
Идем на сайт Font Awesome и выбираем понравившиеся иконки.
Подключаем Font Awesome через CDN в нашем хедере.
Добавляем одну иконку на страницу.
Теперь мы будем менять не только атрибут, но и класс элемента i , поэтому нам нужно добавить элементу идентификатор id
Остальное здесь все почти точно так же.
Ниже полностью код файла index.html
Document вторая иконка закомментированна-->Enter the Password:
Несомненный плюс этого метода, это то, что иконку можно разместить в любой части сайта. Все примеры, я намеренно привожу без CSS, потому как это добавит вам простор для различных способов стилизации и оформления документа.
В этом коде все будет работать так как показано на картинке, но стоит помнить, что класс мы меняем новым свойством браузера, которое не поддерживается браузером IE .innerHTML , куда мы положили и наши иконки.
Ниже полностью код файла index.html
Document Enter the Password:
Вариант с подменой вводимых символов.
Приведу такой вариант просто для информации. Если честно, то совершенно не могу представить, где он может пригодиться.
Суть в том, что мы можем сохранить то что вводит пользователь так как ест, а вместо этого подставить в поле ввода случайные символы.
То есть. Пользователь вводит, например — vvvvvvvvv, а в поле ввода видит — ZfhEysUFKk.
Точно. как на картинке ниже.
Для этого мы сохраняем то что ввел пользователь в переменную str , а вместо этого в this.value выводим случайный символ, полученный путем генерации случайного числа (от 65 до 122 — потому как это цифровое значение символов в разных регистрах разрешенных для паролей).
Затем, мы из случайного числа генерируем символ — String.fromCharCode(); И уже этот символ выводим в поле ввода присвоив его переменной this.value Здесь приведу сам js скрипт
var str = «»; // то что ввел юзер document.getElementById(«test»).onkeypress = function (event) < // то что ввел юзер // var str = this.value; str = str + event.key; console.log(str); // вывод в инпут случайных символов this.value += String.fromCharCode(getRandomInt(65, 122)); // запрет вывода в инпут того что вводит пользователь return false; >// функция генерации случайного числа от — до function getRandomInt(min, max)
Показать/скрыть символы пароля по нажатию на «Показать пароль»
Показать скрыть нужный блок по нажатию
Всем привет вот решил сделать возможность свернуть блок и по нажатии показать Как можно сделать.
Показать/скрыть таблицу по нажатию кнопки
Существует ли метод скрытия/открытия таблицы? Тоесть необхлдимо чтобы при открытии странички.
Блок div скрыть/показать при нажатии на кнопку «показать все»
Добрый день. На странице.
Показать скрыть пароль
Добрый ночи. есть такой вопрос небольшой как сделать чтобы к примеру ввел пароль ты и рядом была.
195 / 142 / 43
Регистрация: 12.03.2021
Сообщений: 811
менять тип input’а по нажатию на чекбокс.
the hardway first
2453 / 1830 / 903
Регистрация: 05.06.2015
Сообщений: 3,598
1 2 3 4 5 6 7 8 9 10
input id="password" type="password" name="password"> input type="checkbox" id="show-password"> label for="show-password"> Show password. label> script> document.querySelector('#show-password').addEventListener('click', function () { document.querySelector('#password').type = this.checked ? 'text' : 'password'; }); script>
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Показать скрыть пароль / Icon
Добрый день. еще такая небольшая проблема возникла.. Я тут при регистрации сделал метод.
Показать/скрыть слой по нажатию на кнопку
Добрый вечер! Как по нажатию на кнопку проекция скрыть слой/показать слой, в данном случае слой6.
Скрыть/показать картинку на листе по нажатию кнопки
Добрый день. Есть лист, на котором находятся картинки, а рядом с ними кнопки. Подскажите.
Показать или скрыть надпись по нажатию на кнопку
Создайте и оформите проект, содержащий на форме Надпись, показывающий по нажатию командной кнопки.
Показать/Скрыть символы EditText
Привет, необходимо по клику на ЧекБокс поле ЭдитТекста то показывала символы то заменялось на •••.
Скрыть/показать символы PasswordChar в textbox
Приветствую уважаемые форумчане. У меня есть кнопка и текстбокс. В текстбоксе стоит свойство.