Статьи, пособия, примеры начинающим вебмастерам.

Горячий поиск: PHP CSS SEO
Главная » ГлавнаяJavaScript Значение value для поля password

Значение value для поля password

В качестве предыстории - легенда возникновения профессии "дизайнер". Говорят, когда-то давно, еще в 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. Не верите? Смотрите действующий пример. А скачать готовый исходник можете со страницы загрузки.
Категория: JavaScript
Опубликовано: 13 августа 2011, просмотров: 2522
 (Голосов: 2)

Комментирование данной новости запрещено.
Чужих не бывает

Валидация

Правильний CSS!

Valid XHTML 1.0 Transitional

Статистика

Генерация страницы: 0.38 секунд, SQL-запросов: 10.

Copyright

© 2008-2013 webamator.ru

Условия заимствования материалов.