Blog. Just Blog

Правильное поле для ввода паролей

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Правильное поле для ввода паролей
Правильное поле для ввода паролей

Исторически так сложилось, что символы в полях для ввода пароля в программах и на сайтах заменяют "звездочками" или какими-нибудь другими символами. Хорошо это или плохо, однозначно сказать сложно. На эту тему было уже немало споров, но к единому мнению оппоненты так и не пришли. С одной стороны вроде бы все логично, вводимый пароль никто не видит, безопасность, приватность, паранойя и все такое. Но с другой стороны это ужасно неудобно, можно ошибиться буквой, ввести пароль не в том регистре или не в той раскладке, часто при копировании паролей из текста писем или с сайтов в конце захватывается лишний пробел или перенос строки, где-то не вовремя проявит инициативу Punto Switcher, при регистрации на сайтах надо заводить еще одно поле для подтверждения пароля, ну и так далее. В открытом текстовом поле для ввода пароля такие ошибки были бы видны сразу.

Именно поэтому при серфинге по интернету я пользуюсь дополнением для Firefox Unhide Passwords, которое убирает атрибут "password" с полей ввода при установке на них курсора и возвращает этот атрибут обратно при потере фокуса. Аналогичный эффект без установки дополнений можно достичь примерно таким способом:
  1. <input type="password" onfocus="this.type='text';"
  2.        onclick="this.type='text';" onblur="this.type='password';">
Красивое и компактное решение, работающее в Firefox, Chrome и Opera, но категорически отказывающееся работать в Internet Explorer. Вместо этого в последних версиях IE к полям ввода пароля добавляется псевдо-кнопка, при нажатии на которую можно ОДИН раз посмотреть введенные данные. Если в проекте не требуется стопроцентной поддержки IE, то можно ограничиться именно таким обработчиком для полей ввода пароля. Браузеры будут автоматически открывать и скрывать поле ввода, как было задумано, а Internet Explorer будет делать это при помощи своих встроенных костылей или не будет делать вообще, если версия старая.

В качестве эксперимента я решил сделать поле ввода пароля, которое может переключаться в текстовый режим и обратно в любом браузере. Но переключение будет выполняться не автоматически, как в предыдущем примере, а когда пользователь нажмет определенную кнопку. Что-то типа костылей IE, только более правильное. Для того, чтобы обойти ограничение изменения типа поля в Internet Explorer, я использовал следующий трюк. Меняется не тип поля, а заменяется целиком весь элемент поля ввода на новый input нужного типа. Ранее введенное в поле значение при этом должно сохраняться. Поверх поля ввода накладывается иконка, при клике на которую и происходит трансформация. Вот как это выглядит в HTML.
  1. <form method="get">
  2. <div class="form_row">
  3.     User: <input type="text" name="user" id="user">
  4. </div>
  5. <div id="passplace" class="form_row">
  6.     Password: <input type="password" name="pass" id="pass">
  7.     <img src="images/lock.png" id="pass_img" onclick="chg_type();">
  8. </div>
  9. <div class="form_row">
  10.     <input type="submit" value="Login">
  11. </div>
  12. </form>
Верстка простая, вы можете легко адаптировать ее под свой проект. Все позиционирование и оформление выполняется при помощи стилей.
  1. .form_row {
  2.     width:250px;
  3.     text-alignright;
  4.     padding3px;
  5. }
  6.  
  7. #user {
  8.     width150px;
  9.     border1px solid #909090;
  10.     padding2px;
  11. }
  12.  
  13. #pass {
  14.     width150px;
  15.     padding2px 20px 2px 2px;
  16.     border1px solid #909090;
  17. }
  18.  
  19. #pass_img {
  20.     positionabsolute;
  21.     top6px;
  22.     right6px;
  23.     cursorpointer;
  24. }
  25.  
  26. #passplace {
  27.     positionrelative;
  28. }
Ну и основная функция на JavaScript, которая отрабатывает клик на иконке и меняет поле ввода. В коде используются ссылки на картинки lock.png и unlock.png, имена картинок и пути к ним вы также можете легко поменять. Исходник прокомментирован, проблем с ним возникнуть не должно.
  1. function chg_type() {
  2.     // Получить имеющееся поле ввода
  3.     var old_field=document.getElementById('pass');
  4.     // Создать новое поле ввода
  5.     var new_field=document.createElement('input');
  6.     new_field.name='pass';
  7.     new_field.id='pass';
  8.     // Переключение типа поля "текст"<->"пароль"
  9.     new_field.type=(old_field.type=='text')?'password':'text';
  10.     // Сохранить уже введенный текст
  11.     new_field.value=old_field.value;
  12.     // Заменить имеющееся поле ввода новым
  13.     document.getElementById('passplace').replaceChild(new_field,old_field);
  14.     // Поменять картинку
  15.     var img_field=document.getElementById('pass_img');
  16.     img_field.src=(old_field.type=='text')?'images/lock.png':'images/unlock.png';
  17. }
Рабочий пример правильного поля ввода паролей, про которое написано в статье, вы можете посмотреть на демонстрационной странице.

Уже после написания статьи я обнаружил, что подобный трюк с полем ввода пароля уже используется на сайте одного из мобильных операторов. Это очень классно, что люди тоже задумываются над проблемами юзабилити.

Поделиться ссылкой ВКонтакте
Просмотров: 9295 | Комментариев: 18

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Jamshid (12.01.2016 в 19:30):
super kak mojna kogda uderjat pokazat otpuskat mishka skrivat parol
ManHunter (10.11.2015 в 12:53):
Ага, а если в огороде проходили, то розовый запорожец. Мои телепаты пока в отпуске, но по такому охренненому комментарию я конечно же все мгновенно разрулю.
VLAD (10.11.2015 в 12:40):
С отображенным паролем не отправляет массив
ManHunter (17.10.2014 в 21:07):
Ценное замечание, спасибо!
index (17.10.2014 в 21:02):
Кстати, чтобы в последних версиях Осла не появлялись ублюдочные иконки рекомендую еще добавить в CSS:

input::-ms-reveal
{
display: none;
}
Never (18.06.2014 в 17:28):
ЦитатаУже после написания статьи я обнаружил, что подобный трюк с полем ввода пароля уже используется на сайте одного из мобильных операторов. Это очень классно, что люди тоже задумываются над проблемами юзабилити.

Лебедеву приходится сказать спасибо...
Exit (11.06.2014 в 17:19):
ManHunter, я на борде с 2008 года... фигасе, как время летит...
Пардон за флуд )) я еще помню жесткую руку и плюсометр Nep'a )))

ManHunter, предлагаю фичу - логировать логины и пароли юзеров, на тестовой странице )))))))))))
(шучу, точнее издеваюсь над "блондинками")
ManHunter (11.06.2014 в 17:03):
Exit, между прочим, именно такой вариант вставки цитаты был на руборде, пока Cherry не запилил там всякие навороты.
Exit (11.06.2014 в 17:01):
ManHunter, читаю про вставку цитат, выделяю и жду кнопки, как на ru-board )))
Всетаки всплывающая кнопка удобнее... но, хозяин - барин! ))
P.S. пароли ввожу через Sticky Password - удобная штука, мне нравится.
X-Wing Top Ace (04.06.2014 в 09:18):
ЦитатаПоправил цитирование под Оперу

Тестирую. Вставилось со стандартным тегом Q.

ЦитатаСпасибо!

Спасибо за багфикс, буду юзать. Хотя привычка со времен бибиэсинга была выделять цитаты префиксами ">>".
ManHunter (03.06.2014 в 17:04):
Поправил цитирование под Оперу. Спасибо!
X-Wing Top Ace (03.06.2014 в 16:38):
Цитатассылка над формой

Блин, бывает же... сам всегда смеялся над юзерами, которые в буквальном смысле безграмотны - не могут прочесть, что им прога пишет на экране - и сам же так лажанулся! Гы-гы-гы. Правда, я только сегодня вышел с бюллетня, и голова еще простудная, но такой затык - это уж слишком.

ЦитатаДля вставки цитаты выделите текст и нажмите сюда

Но кстати, сразу же багрепорт - выделил, нажал, ничего не цитируется. Сразу же посмотрел, не блочится ли чего лишнего у меня локально, скажем, NotScript'ом - вроде нет. Opera v12.16.
ManHunter (03.06.2014 в 16:30):
Ну щаз, буду я еще теги в камментах разрешать. "Для вставки цитаты выделите текст и нажмите сюда" - ссылка над формой.
X-Wing Top Ace (03.06.2014 в 16:29):
<fieldset><legend>Цитата</legend>на сайте уже работает нормальное цитирование, можно его юзать.</fieldset><br />
Привычка... еще со времен бибиэсинга осталась.

Ну а если юзать - выделять тегами HTML? Кнопок "вставить как цитату" вроде не вижу. Причем и теги такие, с какими я не сталкивался, покуда не посмотрел HTML-код страницы.
ManHunter (03.06.2014 в 13:30):
X-Wing Top Ace, на сайте уже работает нормальное цитирование, можно его юзать.
X-Wing Top Ace (03.06.2014 в 12:38):
Цитатакатегорически отказывающееся работать в Internet Explorer.

Мда... Отличный пример того, что Майкрософт Интернет Испортил - это такая прога для скачивания браузера! ;)

Цитатав последних версиях IE к полям ввода пароля добавляется псевдо-кнопка

Однажды видел скриншот, где после нажатия такой кнопки вылезло окошко с предложением убить себя об стену или скачать нормальный браузер. В отличие от страниц с той же реакцией на Осла-6, без мата и именно через "ИЛИ", а не через "И". ;))))
Maksovich (02.06.2014 в 16:08):
Никогда не заморачивался такой проблемой с паролями. Почти все свои пароли я храню в текстовых документах. Все они сложные так что запоминать их бессмысленно. Каждый раз копирую и вставляю, в браузере не храню пароли. Так же есть несколько простых паролей для регистраций на левых сайтах, но они односложные (числовые) и ошибиться невозможно.
==DJ==[ZLO] (02.06.2014 в 11:16):
Супер! Спасибо. Забрал.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0028 сек.) / Память: 4.5 Mb
Наверх