Правильное поле для ввода паролей
Правильное поле для ввода паролей
Исторически так сложилось, что символы в полях для ввода пароля в программах и на сайтах заменяют "звездочками" или какими-нибудь другими символами. Хорошо это или плохо, однозначно сказать сложно. На эту тему было уже немало споров, но к единому мнению оппоненты так и не пришли. С одной стороны вроде бы все логично, вводимый пароль никто не видит, безопасность, приватность, паранойя и все такое. Но с другой стороны это ужасно неудобно, можно ошибиться буквой, ввести пароль не в том регистре или не в той раскладке, часто при копировании паролей из текста писем или с сайтов в конце захватывается лишний пробел или перенос строки, где-то не вовремя проявит инициативу Punto Switcher, при регистрации на сайтах надо заводить еще одно поле для подтверждения пароля, ну и так далее. В открытом текстовом поле для ввода пароля такие ошибки были бы видны сразу.
Именно поэтому при серфинге по интернету я пользуюсь дополнением для Firefox Unhide Passwords, которое убирает атрибут "password" с полей ввода при установке на них курсора и возвращает этот атрибут обратно при потере фокуса. Аналогичный эффект без установки дополнений можно достичь примерно таким способом:
Code (HTML) : Убрать нумерацию
- <input type="password" onfocus="this.type='text';"
- onclick="this.type='text';" onblur="this.type='password';">
В качестве эксперимента я решил сделать поле ввода пароля, которое может переключаться в текстовый режим и обратно в любом браузере. Но переключение будет выполняться не автоматически, как в предыдущем примере, а когда пользователь нажмет определенную кнопку. Что-то типа костылей IE, только более правильное. Для того, чтобы обойти ограничение изменения типа поля в Internet Explorer, я использовал следующий трюк. Меняется не тип поля, а заменяется целиком весь элемент поля ввода на новый input нужного типа. Ранее введенное в поле значение при этом должно сохраняться. Поверх поля ввода накладывается иконка, при клике на которую и происходит трансформация. Вот как это выглядит в HTML.
Code (HTML) : Убрать нумерацию
- <form method="get">
- <div class="form_row">
- User: <input type="text" name="user" id="user">
- </div>
- <div id="passplace" class="form_row">
- Password: <input type="password" name="pass" id="pass">
- <img src="images/lock.png" id="pass_img" onclick="chg_type();">
- </div>
- <div class="form_row">
- <input type="submit" value="Login">
- </div>
- </form>
Code: Убрать нумерацию
- .form_row {
- width:250px;
- text-align: right;
- padding: 3px;
- }
- #user {
- width: 150px;
- border: 1px solid #909090;
- padding: 2px;
- }
- #pass {
- width: 150px;
- padding: 2px 20px 2px 2px;
- border: 1px solid #909090;
- }
- #pass_img {
- position: absolute;
- top: 6px;
- right: 6px;
- cursor: pointer;
- }
- #passplace {
- position: relative;
- }
Code (JavaScript) : Убрать нумерацию
- function chg_type() {
- // Получить имеющееся поле ввода
- var old_field=document.getElementById('pass');
- // Создать новое поле ввода
- var new_field=document.createElement('input');
- new_field.name='pass';
- new_field.id='pass';
- // Переключение типа поля "текст"<->"пароль"
- new_field.type=(old_field.type=='text')?'password':'text';
- // Сохранить уже введенный текст
- new_field.value=old_field.value;
- // Заменить имеющееся поле ввода новым
- document.getElementById('passplace').replaceChild(new_field,old_field);
- // Поменять картинку
- var img_field=document.getElementById('pass_img');
- img_field.src=(old_field.type=='text')?'images/lock.png':'images/unlock.png';
- }
Уже после написания статьи я обнаружил, что подобный трюк с полем ввода пароля уже используется на сайте одного из мобильных операторов. Это очень классно, что люди тоже задумываются над проблемами юзабилити.
Просмотров: 9010 | Комментариев: 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;
}
input::-ms-reveal
{
display: none;
}
Never
(18.06.2014 в 17:28):
Лебедеву приходится сказать спасибо...
Exit
(11.06.2014 в 17:19):
ManHunter, я на борде с 2008 года... фигасе, как время летит...
Пардон за флуд )) я еще помню жесткую руку и плюсометр Nep'a )))
ManHunter, предлагаю фичу - логировать логины и пароли юзеров, на тестовой странице )))))))))))
(шучу, точнее издеваюсь над "блондинками")
Пардон за флуд )) я еще помню жесткую руку и плюсометр Nep'a )))
ManHunter, предлагаю фичу - логировать логины и пароли юзеров, на тестовой странице )))))))))))
(шучу, точнее издеваюсь над "блондинками")
ManHunter
(11.06.2014 в 17:03):
Exit, между прочим, именно такой вариант вставки цитаты был на руборде, пока Cherry не запилил там всякие навороты.
Exit
(11.06.2014 в 17:01):
ManHunter, читаю про вставку цитат, выделяю и жду кнопки, как на ru-board )))
Всетаки всплывающая кнопка удобнее... но, хозяин - барин! ))
P.S. пароли ввожу через Sticky Password - удобная штука, мне нравится.
Всетаки всплывающая кнопка удобнее... но, хозяин - барин! ))
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-код страницы.
Привычка... еще со времен бибиэсинга осталась.
Ну а если юзать - выделять тегами HTML? Кнопок "вставить как цитату" вроде не вижу. Причем и теги такие, с какими я не сталкивался, покуда не посмотрел HTML-код страницы.
ManHunter
(03.06.2014 в 13:30):
X-Wing Top Ace, на сайте уже работает нормальное цитирование, можно его юзать.
X-Wing Top Ace
(03.06.2014 в 12:38):
Мда... Отличный пример того, что Майкрософт Интернет Испортил - это такая прога для скачивания браузера! ;)
Однажды видел скриншот, где после нажатия такой кнопки вылезло окошко с предложением убить себя об стену или скачать нормальный браузер. В отличие от страниц с той же реакцией на Осла-6, без мата и именно через "ИЛИ", а не через "И". ;))))
Maksovich
(02.06.2014 в 16:08):
Никогда не заморачивался такой проблемой с паролями. Почти все свои пароли я храню в текстовых документах. Все они сложные так что запоминать их бессмысленно. Каждый раз копирую и вставляю, в браузере не храню пароли. Так же есть несколько простых паролей для регистраций на левых сайтах, но они односложные (числовые) и ошибиться невозможно.
==DJ==[ZLO]
(02.06.2014 в 11:16):
Супер! Спасибо. Забрал.
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 32,565 раз
Поблагодарили 32,565 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 410 |
 |
 |