Как скрыть пароль html
Особенности работы процесса ввода могут отличаться от браузера к браузеру; мобильные устройства, например, часто отображают вводимый символ на мгновение, прежде чем закрывать его, чтобы позволить пользователю быть уверенным, что они нажали клавишу, которую они хотели нажать; это полезно, учитывая небольшой размер клавиш и лёгкость, с которой может быть нажата неправильная, особенно на виртуальных клавиатурах.
Примечание: Любые формы, содержащие конфиденциальную информацию, такую как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему — см. Небезопасные пароли (en-US) . Другие браузеры также реализуют аналогичные механизмы.
| Value | DOMString представляет пароль или пустую строку |
|---|---|
| События | change (en-US) и input (en-US) |
| Общие поддерживаемые атрибуты | autocomplete , inputmode , maxlength , minlength , pattern , placeholder , readonly , required , and size |
| IDL атрибуты | selectionStart , selectionEnd , selectionDirection , и value |
| Методы | select() (en-US), setRangeText() (en-US), и setSelectionRange() |
Значения
Атрибут value содержит DOMString , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь ещё ничего не указал, это значение представляет собой пустую строку ( «» ). Если указано свойство required , то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.
Если указан атрибут pattern , содержимое элемента управления «password» считается действительным только в том случае, если значение проходит проверку; см. Validation для получения дополнительной информации.
Примечание: Символы строки (U+000A) и возврата каретки(U+000D) недопустимы в значении поля «password» . При вставке пароля, возвращаемые символы удаляются из значения.
Использование полей ввода пароля
Поля ввода пароля обычно работают так же, как и другие текстовые поля ввода; основное отличие состоит в том, чтобы скрывать введённый контент, чтобы люди, не знакомые с пользователем, не могли прочитать его пароль.
Простое поле ввода пароля
Здесь мы видим самый простое поле ввода пароля, с меткой, установленной с помощью элемента .
label for="userPassword">Пароль:label> input id="userPassword" type="password" />
Поддержка автозаполнения
Чтобы менеджер паролей пользователя автоматически вводил пароль, укажите атрибут autocomplete . Для паролей должно быть одно из следующих значений:
Разрешить браузеру или менеджеру паролей автоматически заполнять поле пароля. Это не так информативно, как использование «current-password» или «new-password» .
Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля.
Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это даёт больше информации, чем «on» , так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.
Разрешить браузеру или менеджеру паролей автоматически вводить новый пароль для сайта. Он может быть автоматически сгенерирован на основе других атрибутов элемента управления или может просто указать браузеру представить виджет «предлагаемого нового пароля».
label for="userPassword">Пароль:label> input id="userPassword" type="password" autocomplete="current-password" />
Обязательное заполнение пароля
Чтобы сообщить браузеру пользователя, что поле пароля должно иметь действительное значение перед отправкой формы, просто укажите Boolean атрибут required .
label for="userPassword">Пароль:label> input id="userPassword" type="password" required />
Указание режима ввода
Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут inputmode для определённого запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.
label for="pin">ПИН:label> input id="pin" type="password" inputmode="numeric" />
Настройка длины пароля
Как обычно, вы можете использовать атрибуты minlength и maxlength , чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырёх и не более восьми цифр. Атрибут size используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.
label for="pin">ПИН:label> input id="pin" type="password" inputmode="numeric" minlength="4" maxlength="8" size="8" />
Выделение текста
Как и другие элементы управления текстовой записью, вы можете использовать метод select() (en-US) для выбора всего текста в поле пароля.
HTML
label for="userPassword">Парольlabel> input id="userPassword" type="password" size="12" /> button id="selectAll">Выделить всеbutton>
JavaScript
.getElementById("selectAll").onclick = function (event) document.getElementById("userPassword").select(); >;
Результат
Вы также можете использовать selectionStart и selectionEnd , чтобы получить (или установить), какой диапазон символов в элементе управления, и selectionDirection , чтобы узнать, какой выбор направления произошёл (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенён, их полезность несколько ограничена.
Валидация
Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введённого пароля, вы можете использовать атрибут pattern , чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.
В этом примере допустимы только значения, состоящие как минимум из четырёх и не более восьми шестнадцатеричных цифр.
label for="hexId">Hex ID:label> input id="hexId" type="password" pattern="[0-9a-fA-F]" title="Enter an ID consisting of 4-8 hexadecimal digits" />
Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключённые значения полей не отправляются с формой.
Примеры
Запрос номера социального страхования
В этом примере принимается только ввод, который соответствует формату действительного номера социального страхования Соединённых Штатов. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.
HTML
label for="ssn">SSN:label> input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12" pattern="(?!000)([0-6]\d|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d" required autocomplete="off" /> br /> label for="ssn">Value:label> span id="current">span>
Здесь используется pattern , который ограничивает введённое значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире («-«) или ничем.
В inputmode установлено значение «number» , чтобы побудить устройства с виртуальными клавиатурами переключаться на макет цифровой клавиатуры для облегчения ввода. Для атрибутов minlength и maxlength установлено значение 9 и 12 соответственно, чтобы требовалось, чтобы значение было не менее девяти и не более 12 символов (первый не разделяет символы между группами цифр и последними с ними). Атрибут required используется для указания того, что этот элемент управления должен иметь значение. Наконец, autocomplete установлен «off» , чтобы избежать попыток установить пароли менеджеров паролей.
JavaScript
var ssn = document.getElementById("ssn"); var current = document.getElementById("current"); ssn.oninput = function (event) current.innerHTML = ssn.value; >;
Показать/скрыть пароль
Чтобы включить отображение пароля в поле password нужно заменить атрибут type=»password» на type=»text» , сделать это можно на jQuery или чистом JS.
Показать пароль по чекбоксу
$('body').on('click', '.password-checkbox', function() < if ($(this).is(':checked'))< $('#password-input').attr('type', 'text'); >else < $('#password-input').attr('type', 'password'); >>); Результат:
Показать пароль по ссылке
$('body').on('click', '.password-control', function() < if ($('#password-input').attr('type') == 'password')< $(this).html('Скрыть пароль'); $('#password-input').attr('type', 'text'); >else < $(this).html('Показать пароль'); $('#password-input').attr('type', 'password'); >return false; >); Результат:
Показать пароль по иконке
.password < position: relative; >.password-control < position: absolute; top: 11px; right: 6px; display: inline-block; width: 20px; height: 20px; background: url(/view.svg) 0 0 no-repeat; >.password-control.view < background: url(/no-view.svg) 0 0 no-repeat; >$('body').on('click', '.password-control', function() < if ($('#password-input').attr('type') == 'password')< $(this).addClass('view'); $('#password-input').attr('type', 'text'); >else < $(this).removeClass('view'); $('#password-input').attr('type', 'password'); >return false; >);Результат:
Без jQuery
function show_hide_password(target) < var input = document.getElementById('password-input'); if (input.getAttribute('type') == 'password') < target.classList.add('view'); input.setAttribute('type', 'text'); >else < target.classList.remove('view'); input.setAttribute('type', 'password'); >return false; >Результат:
Предыдущая запись PHP-класс для создания миниатюр изображений
Следующая запись Как преобразовать текст из textarea в параграфы HTML
Комментарии
Авторизуйтесь, чтобы добавить комментарий.
Другие публикации
Небольшая JavaScript функция для генерации пароля.
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.
По спецификации HTML в option нельзя вставить ссылку, если все-таки её туда вставить, то работать она не будет. В таких случаях можно сделать перенаправление браузера по клику на JS или имитацию.
Как скрыть пароль 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)
Как показать и скрыть пароль на JavaScript
Ведь не секрет, что такой тип тот небольшого дизайна, который создан с помощью JavaScript, стал для пользователя популярен. Ведь если он сохранил пароль, то ему не нужно будет делать многочисленные переходы, чтоб узнать в самом браузере, он за секунду просмотрит его на данном портале, где будет подключен скрытие и показ паролей. Обычно в случае формы входа в систему при вводе пароля он отображается в формате точки. Этот тип дизайна помогает преобразовать точечный формат в текст. Нам только для начало нужно поставить стилистику, это у кого не прописана, которая идет для показа и дальнейшего скрытия пароля при помощи значка, под видом глаза.
Так по умолчанию при установки будет выглядеть при открытие сайта или страницы.
После проверки на работоспособность:
Это стили под шрифтовые значение, у большинства они уже подключены, если у вас их нет, то на данной страницы в HEAD вписываем. Где после этого вы можете не только поставить данный знак на этом материале, а по всему сайту сделать оформление.
.showing_stealth <
position: relative;
height: 56px;
width: 315px;
margin: 118px auto;
border-radius: 5px;
box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
>
.showing_stealth input <
width: 100%;
height: 100%;
border: none;
padding-left: 14px;
font-size: 20px;
outline: none;
border-radius: 3px;
>
.showing_stealth input::placeholder <
font-size: 20px;
>
.showing_stealth span <
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
color: #0a2346;
cursor: pointer;
display: block;
>
.showing_stealth span i.conceal-btn::before <
content: «\f070»;
>
const passField = document.querySelector(«input»);
const showBtn = document.querySelector(«span i»);
showBtn.onclick = (()=> <
if(passField.type === «password») <
passField.type = «text»;
showBtn.classList.add(«conceal-btn»);
>else <
passField.type = «password»;
showBtn.classList.remove(«conceal-btn»);
>
>);
Если ранее такая функция была на топовых сайтах, то сейчас при создание сайта можно подключить скрытие с показом пароля в исполнение JavaScript, что будет оригинально смотреться от других стандартных сайтов.