А в чем собственно проблема?
У вас бывает такое, что когда вы вводите пароль, он не подходит, хотя вам кажется что вводили вы все верно? После этого начинаешь раздражаться и злиться, пароль увидеть нельзя, потому что по стандарту поле типа password закрыто звездочками. Всем известный Якоб Нильсен (специалист по web-usability) предложил решение данного вопроса: “Показывать пароль открытым при его вводе”. Многие не согласны с эти категорически, да и я тоже. Безопасность все же не должна страдать ради удобства, хотя Нильсен говорит об обратном. Ну что ж попробуем выйти из положения и совместить безопасность и удобство. Как говорится “все уже придумано до нас”, поэтому не будем изобретать велосипед, а просто вспомним поля ввода паролей.
Существующие реализации
Первое что вспоминается это ввод пароля на мобильном icq (jimm). Реализация там такова: при вводе пароля сначала показывается буква, после этого она закрывается звездочкой. Данный способ на мой взгляд имеет больше недостатков, чем преимуществ:
- Этот способ имеет место жить на мобильнике, там это удобно, но никак не на пк. Печать с клавиатуры пк намного быстрее, поэтому сам пароль видно все равно не будет, ни тебе ни постороннему лицу. Либо нужно печатать его слишком медленно, что подвергает риску его защиту (могут подсмотреть или запомнить).
- Отход от привычных звездочек в форме пароля может вызвать непонимание и недоверие или еще хуже того просто закрытие окна браузера с данной формой.
- Реализация на сайте alistapart.com данного метода не очень хорошо работает. К примеру у меня она как-то притормаживает и вообще смотреться не очень корректно, хотя журнал alistapart очень авторитетный и уважаемый. (Я сам являюсь его поклонником)
Второй способ, который мне очень нравится, это способ при котором введенный пароль можно посмотреть. Такой способ реализован в старом квипе, к примеру. И как оказалось при регистрации почты Яндекса. Такую же реализацию я решил использовать в своем новом проекте, описание которого в скором времени появится.Ну что ж приступим ))
Ready steady go
Изменить тип поля невозможно, используя javascript. Т.е поле типа password невозможно изменить просто на поле типа text. Отсюда возникает маленькая проблемка при реализации нашего способа. Но значение password поля получить можно легко, поэтому я предлагаю просто добавлять span который будет располагаться поверх нашего поля с паролем, закрывая звездочки. Сделать это достаточно легко, нужно лишь задать span абсолютную позицию и выставить значение z-index отличное от 1.
Для начала сверстаем данную форму. Ее разметка будет выглядеть вот так
Обычная на вид форма. Самое главное, чтобы работал наш способ, это в css указать для тега fieldset position:relative и добавить стили для нашего span. Position:relative мы указываем для того, чтобы указывать позицию span относительно fieldset а не документа. В принципе все готово, осталось прикрутить событие для checkboxa viewPassword, которое будет показывать наш span и записывать туда пароль.
$(document).ready(function() {
$('input[type="password"]').bind('focus',function() {
$('.abs').remove();
})
$('#viewPassword').bind('change',function() {
var password = $('#password').val();
if($(this).attr('checked') == true || $(this).attr('checked') == 'undefined')
$('#password').before(''+password+'');
else
$('.abs').remove();
})
})Наша форма готова) Рабочий пример ждет вас
Стоит обратить внимание на следующие статьи
- Stop password masking
- The problem with passwords — пример
- The problem with passwords — статья на alistapart.com
- Обсуждение проблемы на vremenno.net