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

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

irbees2008 irbees2008 Опубликовано - 17 - мая Интерфейс
4041 - 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 стилями.

Можешь почитать и вот эту статейку "Интересный CSS пример оформления для изображений"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

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

Теги

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

Статистика

  • Caйту: 4486 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 670
  • Онлайн всего: [4]
  • Гости: [4]
  • SQL запросов: 33
  • Генерация страницы: 0.368сек
  • Потребление памяти: 5.160 Mb 
  •   Яндекс.Метрика