Значение value для поля password
Опубликовано admin-ом в категории javascript
В качестве предыстории - легенда возникновения профессии "дизайнер". Говорят, когда-то давно, еще в XIX веке один из владельцев железнодорожной компании захотел сделать очень красивый паровоз. Он нанял лучших художников и скульпторов того времени - паровоз должен был привлекать внимание именно своей красотой. Художники постарались на славу - разрисовали котел разнообразными орнаментами, скульпторы не отставали - налепили всяких барельефов... И самый красивый поезд тронулся с перрона к следующей станции. Когда он прибыл, от былой красоты не осталось и следа - краска на котле потрескалась от высокой температуры, а барельефы рассыпались от вибрации.
Вобщем, прибывший поезд выглядел гораздо хуже своих "некрасивых" собратьев. Тогда владелец железнодорожной компании обратился к инженеру - чтобы тот проконсультировал нанятых художников и скульпторов.
По легенде это и был первый в мире дизайнер. Зачем такая длинная предыстория? Во-первых просто красивая легенда 
- а во-вторых за последние полтора месяца ко мне уже дважды обращались с просьбой, которую можно сравнить с пожеланием упомянутого владельца железнодорожной компании. Речь идет о значении value для типа поля password. Чтобы было понятнее о чем речь, вот фрагмент изображения того что хочет заказчик:
Слова Login и Password должны быть прямо внутри поля, а не как обычно - сбоку или сверху от него. Для тех кто не видит в таком пожелании ничего странного, небольшое пояснение. Для поля с логином проблем не возникает, но для поля с паролем... Если для поля указан тип "password", то содержимое поля будет скрыто. В зависимости от браузера, звездочками или кружочками. Это сделано для того, чтобы пароль, который вводит пользователь, невозможно было "подсмотреть" посторонним людям. Для примера я поставил value="Password:" - можете посмотреть что получается:
Думаю, что всего вышенаписанного достаточно чтобы будущим заказчикам обьяснить, что некоторые вещи нужно рисовать именно так а не иначе. Но... иногда хочется сделать то, что никто никогда не делал - просто для того чтобы не терять навыки. А еще чтобы лишний раз подтвердить фразу "в программировании нет ничего невозможного, бывает лишь нецелесообразное". Давайте попробуем совместить несовместимые вещи - чтобы в поле password стояло слово Password?
Сначала сделаем нашу форму:
- <form method="post"><p><input type="text" name="login" size="40" /></p><p><input type="password" name="password"></p></form>
Ничего необычного - всего два поля. У верхнего type="text", у нижнего type="password". Далее добавим стили, чтобы поля выглядели "как на картинке", т.е. соответствовали техническому заданию:
- .formfield0, .formfield1{
- border: 0;
- height: 26px;
- padding: 0 0 0 11px;
- margin:0;
- width: 242px;
- font-family: Arial;
- font-size:14px;
- font-weight: bold;
- }
- .formfield0{
- background:#fff url('pbg0.png') no-repeat;
- }
- .formfield1{
- background:#fff url('pbg1.png') no-repeat;
- }
Внимательный читатель наверняка уже обратил внимание что в стилях использованы две фоновые картинки. У меня они называются pbg0.png и pbg1.png - один ввиде обычной рамки для поля, а второй ввиде рамки с написанным словом Password. При загрузке страницы мы будем показывать картинку со словом Password, а если пользователь щелкнет мышкой в этом поле - просто поменяем картинку. Для этого заменим строку, которая описывает поле с паролем вот на эту:
- <input type="password" class="formfield0" name="password" onClick="this.className='formfield1'">
Думаю здесь все понятно - при щелчке мышкой (событие onClick) мы меняем класс formfield0 на formfield1. Пример уже практически рабочий, но... согласитесь - будет не очень красиво если поле для ввода пароля "очищается" по щелчку мышкой, а поле для ввода логина - нет.
Давайте добавим миниатюрную функцию, которая будет очищать поле с логином:
- function clearElem(obj){
- obj.value = ' ';
- }
И изменим соответствующую строку в нашей форме на вот такую:
- <input type="text" class="formfield1" name="login" onClick='clearElem(this); return false;' value="Login:" size="40" />
Уже лучше, наше решение уже почти работает. Почему "почти"? Да потому что существует некая фирма Microsoft, которая выпускает программу Internet Explorer. Вообще-то программа Internet Explorer нужна только для того, чтобы единственный раз ее запустить и скачать себе браузер, но некоторые пользователи используют Internet Explorer вместо браузера - именно у них наш пример будет работать немного некорректно. Чтобы "вылечить" подделку от Microsoft, добавим небольшое условие:
- <!--[if lte IE 8]><style type="text/css">.formfield0, .formfield1{
- padding-top: 6px;
- }
- </style><![endif]-->
Все, теперь наш пример работает во всех основных браузерах (Opera, Firefox, Safari, Chrome) и даже в программе Internet Explorer. Не верите? Смотрите действующий пример. А скачать готовый исходник можете со страницы загрузки.
