Зарегистрироваться | Забыли пароль


Для начинающих

bottom

Уроки

bottom

Полезное

bottom

Файлы

bottom

Ссылки

bottom

Главная страница » Уроки по JQuery

Интересная форма для пароля

В этом уроке мы сделаем поля для ввода пароля, в котором будет отображается раскладка клавиатуры, (язык на котором вводится пароль) и регистр вводимых символов (заглавные или строчные). Ведь водя пароль в поле, все символы заменяются на звездочки или точки, и поэтому отследить его правильность невозможно.

Пример

Чтобы сделать такое поле необходимо между тегами <head></head> подключить следующие скрипты:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.keyboardLayout.js"></script>

Хорошо, а теперь чтобы наш индикатор правильно и красиво отображался, подключим таблицу стилей:

<link rel="stylesheet" type="text/css" href="jquery.keyboardLayout.css">

Ну вот теперь можно создать и саму форму с полем для ввода пароля:

<form action="#" method="post" name="pass">
Введите пароль <input type="password" name="password" class="pass"><br><br>
<input type="button" name="button" value="Отправить">
</form>

Сразу после формы необходимо прописать еще один скрипт который будет определять у какого поля необходимо отображать индикатор:

<script type="text/javascript">
  $(function(){
   $(':password').keyboardLayout();
  });
</script>

Ну вот, как видите все очень просто и легко, теперь пользователь будет вводить свой пароль не вслепую.

Автор: Евгений Бочкарев · Урок добавлен: 17 Августа 2009 в 20:45 · Просмотров: 694

Рекомендую
  • Currently 0.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 0.0/5 (всего 0 голоса)

Понравился сайт? Внесите свой вклад в его развитие?
R314489888859
41001346159934




   Комментарии к уроку (2)

12
iceman12    Добавлено: 30-07-2010 в 20:07
Не знаю как в других браузерах, но в Опере работает не корректно, показывает верхний регистр только при включенном капсе, а при шифте показывает нижний регистр.
 
34
12
Nurmaga    Добавлено: 27-08-2010 в 16:22
Классный урок!!!
 
34
12

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


Ваше имя:


Текст комментария:

Получать уведомления по Email могут только зарегистрированные пользователи. Регистрация
Введите цифры с картинки


 
34