Хаки и Скрипты Next Generation CMS

Показываем пароль в поле ввода

irbees2008 irbees2008 Опубликовано - 17 - мая Интерфейс
2878 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Как вы знаете в поле ввода пароля, всё прячется под звёздочками или точками. С позиции безопасности, это конечно правильно. Но ведь в основном мне не надо прятать свой пароль от любопытных глаз и это создаёт небольшие неудобства, т.к. я не вижу что ввожу. Проблемы с раскладкой, опечатки и с этим сталкивался наверное каждый. Поэтому мы немного позаботимся о пользователе добавив скрипт, который показывает или скрывает вводимый пароль.
Итак приступим
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. , распаковываем и заливаем файл jquery.passEye.js в папку /JS/ вашего шаблона, а файл passEye.png в папку /images/.
2. Перед закрывающим тегом /body подключаем наш скрипт:

Код:
<script type="text/javascript" src="{tpl_url}/js/jquery.passEye.js"></script>
3.Добавляем стили для нашего глаза:
Код:
/* PassEye */
.passEye {position:relative;display:inline-block;}
.passEye input {padding-right:35px;}
.passEye input::-ms-reveal, .passEye input::-ms-clear {display:none}
.passEye .eye {position:absolute;right:10px;top:50%;margin-top:-4px;display:block;height:10px;width:18px;background:url(../images/passEye.png) no-repeat left 2px;cursor:pointer;}
.passEye .openEye {background-position:left bottom;}
4. Теперь оборачиваем нужный нам input в тег span:
Код:
<span class="passEye"> тут ваш input </span>
5.Вот и все!Вам может потребоваться небольшая настройка CSS стилей, т.к. при добавлении "глаза", немного меняется размер поля. Так-же не забывайте указать путь к картинке, если она находится не рядом с CSS стилями.

Можешь почитать и вот эту статейку "Простой плагин JQuery Covering-Bad"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

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

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [7]
  • Гости: [7]
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 35
  • Генерация страницы: 0.173сек
  • Потребление памяти: 4.939 Mb 
  •   яндекс.ћетрика