Поля ввода с убирающейся подсказкой
Встала простенькая вроде задачка: сделать форму авторизации с подсказками в полях ввода. Быстрый осмотр выдачи гугла выдал решения в которых либо ничего не показывалось при отключенном JavaScript, либо пароль отображался как есть. Конечно стоило поискать поплотнее, но я подумал что написать это довольно просто и открыл текстовый редактор. А поняв, что со сложностью я немного промахнулся, решил совместить полезное с полезным и поделиться решением с миром, заодно создав первый пост на хабре.
Скрипт написан без применения библиотек, ибо шаблончик получился достаточно легкий, больше JavaScript использовать нигде не планировалось, а вешать довольно тяжелую библиотеку ради такого пустяка не очень хотелось.
Вот так выглядит форма в HTML:
Для полноты картины отмечу, что скрипт вставляется в head так:
Вот собственно сам скрипт:
Скрипт проверен в IE7, IE8, FF, Opera, Chrome, Safari.
Скрипт написан без применения библиотек, ибо шаблончик получился достаточно легкий, больше 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 комментариев