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. }
Рабочий пример правильного поля ввода паролей, про которое написано в статье, вы можете посмотреть на демонстрационной странице.

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

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 6612 | Комментариев: 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-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0029 сек.) / Память: 4.5 Mb
Наверх