23.07.13, 02:04
1 комментарий
  DLE Хаки

PassEye или "Парольный глаз"

Обычно, в полях с паролями, всё прячется под звёздочками или точками. С позиции безопасности, это конечно правильно. Но ведь 99.9% процентов времени, мне не приходится прятать свой пароль от любопытных личностей и это скорее создаёт неудобства, т.к. я не вижу что ввожу. Проблемы с раскладкой, опечатки...с этим сталкивался наверное каждый. Поэтому мы немного позаботимся о пользователе добавив Парольный глаз, который показывает или скрывает вводимый пароль.

Установка:
1. Копируем из архива файл jquery.passEye.js в папку /JS/ вашего шаблона, а файл passEye.png в папку /images/.

2. Перед закрывающим тегом:

</body>


Вставляем:

<script type="text/javascript" src="{THEME}/js/jquery.passEye.js"></script>


3. В файле стилей CSS шаблона добавляем:

/* 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 стилями.

СКАЧАТЬ

Вес файла
1.82 Kb

Комментарии

  1. Anton 23 июля 2013 16:25                    

    Спасибо! smile
    Пригодится! smile

Напишите своё мнение