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

03.06.2014 | Категория: Web-мастеру и не только | Автор: ManHunter

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

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

Именно поэтому при серфинге по интернету я пользуюсь дополнением для Firefox Unhide Passwords, которое убирает атрибут "password" с полей ввода при установке на них курсора и возвращает этот атрибут обратно при потере фокуса. Аналогичный эффект без установки дополнений можно достичь примерно таким способом:

Code (HTML) : Убрать нумерацию

<input type="password" onfocus="this.type='text';"
onclick="this.type='text';" onblur="this.type='password';">

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

В качестве эксперимента я решил сделать поле ввода пароля, которое может переключаться в текстовый режим и обратно в любом браузере. Но переключение будет выполняться не автоматически, как в предыдущем примере, а когда пользователь нажмет определенную кнопку. Что-то типа костылей 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;
}

Ну и основная функция на JavaScript, которая отрабатывает клик на иконке и меняет поле ввода. В коде используются ссылки на картинки lock.png и unlock.png, имена картинок и пути к ним вы также можете легко поменять. Исходник прокомментирован, проблем с ним возникнуть не должно.

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';
}

Рабочий пример правильного поля ввода паролей, про которое написано в статье, вы можете посмотреть на демонстрационной странице.

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

Просмотров: 9274 | Комментариев: 18

Метки: JavaScript, HTML, оформление сайта, CSS

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

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

Лебедеву приходится сказать спасибо...

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):

Супер! Спасибо. Забрал.

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

Заполните форму для добавления комментария

Если программист в девять утра уже на работе, значит он там же и ночевал

Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина

Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.

Метки статей

Свернуть

Вам помог этот сайт?

Поблагодарили 34,315 раз

День работника ломоперерабатывающей отрасли России

День российской полиграфии

День юридической службы Министерства внутренних дел России

День принятия Крыма, Тамани и Кубани в состав Российской империи

День подснежника

Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите

Ctrl

Enter

Буду очень благодарен, если размеcтите мою кнопочку:

<a href="https://www.manhunter.ru" target="_blank"><img src="https://www.manhunter.ru/images/button.gif" alt="Личный блог ManHunter'а" title="Личный блог ManHunter'а" width="88" height="31" /></a>

$Яндекс тИЦ: {YANDEX_TIC}$

Яндекс ИКС: 380

Сейчас я слушаю

---

- автообновление

Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.0046 сек.) / Память: 4.5 Mb

	2024 - АПРЕЛЬ
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

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

Комментарии

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