Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по 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 Просмотров: 12915

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (1)

#2 Nurmaga 27-08-2010 в 16:22
Классный урок!!!
#3 Fokir 12-06-2011 в 22:20
Урок хороший, но когда оставляешь голос, у вас вместо слов появляется &#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;: 1.8/5 (&#65533;&#65533;&#65533;&#65533;&#65533; 16 &#65533;&#65533;&#65533;&#65533;&#65533;&#65533;) &#65533;&#65533;&#65533; &#65533;&#65533;&#65533;&#65533;&#65533; &#65533;&#65533;&#65533;&#65533;&#65533;&#65533;!
#4 Fokir 12-06-2011 в 22:21
ой знаки вопросов
#5 43 23-06-2011 в 12:53
cccccccccccывфвыйццйувфывсячсясмвуау
#6 orion 24-11-2011 в 03:24
Евгений тебе все-же необходимо добавить фильтр мата
#7 orion 24-11-2011 в 03:25
Аааа ищез ты его вручную удалил или как?
#8 orion 24-11-2011 в 03:26
или у тебя какойто мега мильтр ответь интересно
#9 Евгений 24-11-2011 в 15:12
Да нет просто сам удалил))
#10 Сергей 10-12-2011 в 02:34
Измените ссылку Регистрация под формай комментариев... сайт супер +5
#11 нужная штука 22-03-2014 в 18:18
спасибо, скрипты необычные как раз что искал долгое время. а тут все в одной банке.... автор молодец, продолжайте в том же духе... удачи
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


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

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки