22 декабря 2015
12 августа 2009
27
Улучшаем поля ввода пароля
Всем привет!
Сегодня мы поговорим о возможных улучшениях поля ввода паролей на сайтах. Дело в том, что вводя пароль, вместо вводимых символов мы видим только звездочки и поэтому часто ошибаемся (если только вы не мастер слепого метода печати). Согласитесь, что это не очень хорошо.
Именно поэтому я решил сделать плагин для jQuery, который бы как-то показывал вводимые символы. В этой статье вас ждет мое решение с выводом вводимого символа справа от поля ввода пароля и решение от Криса Койера, автора сайта «Трюки CSS» в стиле айфоновского ввода паролей.
Ввод паролей как в iPhone
Это плагин к jQuery, как я уже говорил, сделал Крис Койер. Суть в том, что при ввода пароля вы видите последний введенный символ, а все предыдущие заменяются на звездочки (или любые другие спецсимволы).
Как это работает? Схема такая. Скрипт создает копию вашего парольного поля, но с типом «текст», исходное поле скрывается и ввод символов идет в клона. Теперь рассмотрим использование.
<form name="second-form" method="post">
<input type="password" id="password-input-2" name="p2" />
</form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iphone.style.pass.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#password-input-2').dPassword({
interval: 100,
duration: 1000
});
});
</script>Как вы видите, я задал свои значения для времени показа последнего символа (duration) и интервала между показами символов (interval). Если вы печатаете быстро, то можете увидеть сразу несколько «открытых» символов.
Показ последнего введенного символа справа от поля
Надо заметить, что статью Криса я увидел уже после того, как написал свой плагин. Так что у нас с ним есть две реализации одной и той же идеи. Можете взять ту, которая удобнее вам, но я расскажу про свою ;-)
Итак, все просто. Вам нужно лишь указать, к какому инпуту применить плагин и задать в стилях настройки для спана, содержащего вводимый символ. Плагин сам создаст спан с указанным классом (по умолчанию — typed-char) и расположит его справа от инпута. В общем, рассмотрим использование.
<style>
.typed-char {
border: 1px solid #c9c041;
background: #eed200;
padding: .1em .5em;
font-weight: bold;
text-shadow: #FFF 0px 1px 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-size: 12px;
font-family: Verdana;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
}
</style>
<body>
<h1>Вывод последнего введенного символа в поле пароля</h1>
<form name="first-form" method="post">
<input type="password" id="password-input-1" name="p1" />
</form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fire.pass.chars.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#password-input-1').awesomePassword({
left: 13
});
});
</script>Вот такие нехитрые скрипты на мой взгляд смогут чуть-чуть улучшить ввод пароля. Удачи!
Вариант 2 у Криса на много лучше с точки зрения usability, имхо.
Т.е. если не уверен во вводимом пароле, то всегда можно подглядеть. А по умолчанию все как обычно. И из-за плеча пароль подглядеть сложнее :)
Поэтому вывод пароля даже пусть и такой кратковременный на экран - это дыра в безопасности... я лучше 10 раз ошибусь при вводе пароля, чем его кто-то один раз увидит.
Набор паролей на ИНДИВИДУАЛЬНЫХ мобильных устройствах, когда они закрываются звёздочками, считаю бредом .. причём полным... подсмотреть что набирается на мобиле в 100 раз сложнее чем на стационарном или портативном компьютере. Однако это вносит офигенный дискомфорт для пользователя - кто набирал хоть раз поймёт о чём я. Особенно если горе-разработчики не отключают на полях ввода паролей Т9 - это ваще жесть :) или не переключают раскладку языка сразу на английскую (хотя это конечно вопрос спорный.. но лично мне было бы так намного удобнее)
Фух.. извините за столь пространный комментарий :)))
Методу ввода сто лет...
ЭХ, КОГДА ЖЕ ЗАКОНЧИТСЯ В РОССИИ ЭРА УМНИЧАНЬЯ?
Странновато, что она вот так за вас заступается.
vremenno-net/examples/impoved-pass-input/iphone.style.pass.zip