Поля ввода с убирающейся подсказкой

Встала простенькая вроде задачка: сделать форму авторизации с подсказками в полях ввода. Быстрый осмотр выдачи гугла выдал решения в которых либо ничего не показывалось при отключенном JavaScript, либо пароль отображался как есть. Конечно стоило поискать поплотнее, но я подумал что написать это довольно просто и открыл текстовый редактор. А поняв, что со сложностью я немного промахнулся, решил совместить полезное с полезным и поделиться решением с миром, заодно создав первый пост на хабре.
Скрипт написан без применения библиотек, ибо шаблончик получился достаточно легкий, больше JavaScript использовать нигде не планировалось, а вешать довольно тяжелую библиотеку ради такого пустяка не очень хотелось.

Вот так выглядит форма в HTML:
<div id="login">
 <form method="post" action="login.html">
 <input type="text" value="Логин" name="login" size="8" id="name" />
 <input type="password" value="Пароль" name="password" size="8" id="password" />
 <div class="button"><button type="submit">Войти</button></div>
 </form>
</div>

Для полноты картины отмечу, что скрипт вставляется в head так:
<script type="text/javascript" src="js/login.js"></script>

Вот собственно сам скрипт:
var login_field = 'name' // ID поля ввода логина
var password_field = 'password' // ID поля ввода пароля
var login_text = 'Логин' // Текст в поле ввода логина
var password_text = 'Пароль' // Текст в поле ввода пароля
var password_name = 'password' // Имя поля ввода пароля, которое передается скрипту
var field_size = 8 // Длина поля ввода пароля

/*
 Преобразует поле типа password в text
*/
function istext(password){
 var form = password.parentNode;
 var elem = document.createElement('input');
 var text = password.value
 form.removeChild(password);
 form.appendChild(elem);
 elem.type='text';
 if (text != '') elem.value = text; else elem.value=password_text;;
 elem.size=field_size;
 elem.name = password_name;
 elem.id = password_field;
 elem.onfocus=focus;
 elem.onblur=blur;
}

/*
 Преобразует поле типа text в password
*/
function ispasswd(password){
 delete form
 delete elem
 var text = password.value
 var form = password.parentNode;
 var elem = document.createElement('input');
 elem.size=field_size;
 elem.type='password';
 if (text != password_text) elem.value = text; else elem,value = '';
 form.appendChild(elem);
 var form = elem.parentNode;
 form.removeChild(password);
 elem.name = password_name;
 elem.onblur=blur;
 setTimeout(elem.focus(), 1000); // IE по-простому не может
 elem.onfocus=focus;
 elem.id = password_field;

}
/* Вызывается при получении фокуса ввода */
function focus(){
 var text = ''
 if (this.name == password_name){
 ispasswd(this);
 } else {
 text=login_text;
 if (this.value==text){this.value=''};
 }
}
/* Вызывается при потере фокуса ввода */
function blur(){
 var text = ''
 if (this.name == password_name) {
 if (this.value == '') istext(this);
 }else{
 text=login_text;
 if (this.value==''){this.value=text};
 }
}

function main(){
 var password = document.getElementById(password_field);
 var name = document.getElementById(login_field);
 istext(password);
 name.onfocus=focus;
 name.onblur=blur;
}

window.onload = main

Кратенькое описание
window.onload = main — после загрузки страницы вызывается функция main, в которой на поле ввода логина вешаются обработчики событий получения (focus) и потери (blur) фокуса, а поле ввода пароля заменяется на текстовое поле с подсказкой. Далее при попытке ввода пароля поле снова заменяется на специальное поле, скрывающее ввод.

Скрипт проверен в IE7, IE8, FF, Opera, Chrome, Safari.


0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.