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

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

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

Можешь почитать и вот эту статейку "Тег map "

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [5]
  • Гости: [5]
  • Были сегодня : [3] Google, Яндекс, Google
  • SQL запросов: 32
  • Генерация страницы: 1.112сек
  • Потребление памяти: 5.215 Mb 
  •   Яндекс.Метрика