Mar 13 2011 at 05:59

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

Invite pending

Встала простенькая вроде задачка: сделать форму авторизации с подсказками в полях ввода. Быстрый осмотр выдачи гугла выдал решения в которых либо ничего не показывалось при отключенном 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.

Hubs:

Lumber room