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

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

Именно поэтому при серфинге по интернету я пользуюсь дополнением для Firefox Unhide Passwords, которое убирает атрибут "password" с полей ввода при установке на них курсора и возвращает этот атрибут обратно при потере фокуса. Аналогичный эффект без установки дополнений можно достичь примерно таким способом:Красивое и компактное решение, работающее в Firefox, Chrome и Opera, но категорически отказывающееся работать в Internet Explorer. Вместо этого в последних версиях IE к полям ввода пароля добавляется псевдо-кнопка, при нажатии на которую можно ОДИН раз посмотреть введенные данные. Если в проекте не требуется стопроцентной поддержки IE, то можно ограничиться именно таким обработчиком для полей ввода пароля. Браузеры будут автоматически открывать и скрывать поле ввода, как было задумано, а Internet Explorer будет делать это при помощи своих встроенных костылей или не будет делать вообще, если версия старая.

В качестве эксперимента я решил сделать поле ввода пароля, которое может переключаться в текстовый режим и обратно в любом браузере. Но переключение будет выполняться не автоматически, как в предыдущем примере, а когда пользователь нажмет определенную кнопку. Что-то типа костылей IE, только более правильное. Для того, чтобы обойти ограничение изменения типа поля в Internet Explorer, я использовал следующий трюк. Меняется не тип поля, а заменяется целиком весь элемент поля ввода на новый input нужного типа. Ранее введенное в поле значение при этом должно сохраняться. Поверх поля ввода накладывается иконка, при клике на которую и происходит трансформация. Вот как это выглядит в HTML.Верстка простая, вы можете легко адаптировать ее под свой проект. Все позиционирование и оформление выполняется при помощи стилей.Ну и основная функция на JavaScript, которая отрабатывает клик на иконке и меняет поле ввода. В коде используются ссылки на картинки lock.png и unlock.png, имена картинок и пути к ним вы также можете легко поменять. Исходник прокомментирован, проблем с ним возникнуть не должно.Рабочий пример правильного поля ввода паролей, про которое написано в статье, вы можете посмотреть на демонстрационной странице.

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

Комментарии

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

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

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.