Написать эту статью меня натолкнуло общение с администратором сайта одного из футбольных клубов российской Премьер-лиги. Надеюсь, что он ее прочитает и воцарит сие в жизнь.
Сейчас стало очень модно делать формы, в которых заголовок поля для ввода написан в самом поле. Например так:
Но как в таком случае быть с полем для ввода пароля? Ведь он заменяет дефолтное значение на звездочки.
В этом посте я решил рассмотреть несколько вариантов, как сделать поле для пароля со звездочками, но что бы слово «пароль» было видно.
Понятно, что без JS тут не обойтись. Сразу же извиняюсь за такой JavaScript — очень давно пишу исключительно с использованием JQuery, и на чистом JS писать довольно трудно )
Пример нашей формы
Решение, которое приходит в голову самым первым. Просто менять type у инпута при установке фокуса и снятии. Начало кода получается примерно таким:
Но начав проверять это в разных браузерах сталкиваемся с тем, что этот код понимают все, но не IE. Печально. Отметаем, думаем дальше.
Почему бы нам рядом с инпутом для пароля рядом не положить инпут с текстом и по очереди менять их?
Наша форма будет выглядеть так:
Ко всему этому делу у нас цепляется следующий JavaScript код:
И на удивление — все прекрасно работает и довольно кроссбраузерно.
Обнаруженные баги: в IE6 происходит небольшой прыжок верстки. Но при верстке можно строго зафиксировать контейнеры, в которых инпуты лежат и это не будет напрягать. Плюс неизвестно поведение различных запоминалок паролей при работе со скрытым инпутом. Потестил в 10 Опере встроенную запоминалку — работает нормально.
Если вас напрягает два инпута, мы можем попробовать следующий вариант: сделать для инпута с паролем бэкгарунд на котором написано слово «Пароль», а затем менять класс у инпута.
Вот такой станет наша форма:
На все это вешаем вот такой вот JavaScript:
Тоже замечательно работает, нигде ничего не прыгает, запоминалки работают на ура.
Баги:
1. Разный рендеринг шрифтов в разных браузерах и ОС. Может получится так, что картинка с текстом «Пароль» будет выглядеть несколько иначе, чем весь основной текст на странице.
2.Пользователи, которые работают в Интернет с выключенными картинками. Но процент таких людей невероятно мал, да я думаю, они догадаются, что следующее поле после поля для логина — поле для пароля.
Кстати, на картинке в начале топика это реализовано именно таким методом.
Сейчас стало очень модно делать формы, в которых заголовок поля для ввода написан в самом поле. Например так:
Но как в таком случае быть с полем для ввода пароля? Ведь он заменяет дефолтное значение на звездочки.
В этом посте я решил рассмотреть несколько вариантов, как сделать поле для пароля со звездочками, но что бы слово «пароль» было видно.
Понятно, что без JS тут не обойтись. Сразу же извиняюсь за такой JavaScript — очень давно пишу исключительно с использованием JQuery, и на чистом JS писать довольно трудно )
Пример нашей формы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ru">
<head>
<title>Тест</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<form action="index.html">
<p>
<input type="text" value="Логин" class="authFormInput authFormInputLogin" id="authFormInputLogin" name="authFormInputLogin" />
<input type="text" value="Пароль" class="authFormInput authFormInputPass" id="authFormInputPass" name="authFormInputPass" />
<input type="submit" value="Войти в систему" />
</p>
</form>
</div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.1. Замена type
Решение, которое приходит в голову самым первым. Просто менять type у инпута при установке фокуса и снятии. Начало кода получается примерно таким:
window.onload = function() {
window.document.getElementById('authFormInputPass').onfocus = function() {
this.setAttribute("type", "password");
}
}
* This source code was highlighted with Source Code Highlighter.Но начав проверять это в разных браузерах сталкиваемся с тем, что этот код понимают все, но не IE. Печально. Отметаем, думаем дальше.
2. Подмена инпутов
Почему бы нам рядом с инпутом для пароля рядом не положить инпут с текстом и по очереди менять их?
Наша форма будет выглядеть так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ru">
<head>
<title>Тест</title>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
.hidden {
display: none;
}
.visible {
display: block;
}
</style>
</head>
<body>
<div>
<form action="index.html">
<p>
<input type="text" value="Логин" class="authFormInput authFormInputLogin" id="authFormInputLogin" name="authFormInputLogin" />
<input type="text" value="Пароль" class="authFormInput authFormInputPass visible" id="authFormInputPassT" name="authFormInputPassT" />
<input type="password" value="" class="authFormInput authFormInputPass hidden" id="authFormInputPass" name="authFormInputPass" />
<input type="submit" value="Войти в систему" />
</p>
</form>
</div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.Ко всему этому делу у нас цепляется следующий JavaScript код:
window.onload = function() {
var authFormInputPass = document.getElementById('authFormInputPass');
var authFormInputPassT = document.getElementById('authFormInputPassT');
authFormInputPassT.onfocus = function() {
authFormInputPassT.className="authFormInput authFormInputPass hidden";
authFormInputPass.className="authFormInput authFormInputPass visible";
authFormInputPass.focus();
}
authFormInputPass.onblur = function() {
if (!authFormInputPass.value) {
authFormInputPass.className="authFormInput authFormInputPass hidden";
authFormInputPassT.className="authFormInput authFormInputPass visible";
}
}
}
* This source code was highlighted with Source Code Highlighter.И на удивление — все прекрасно работает и довольно кроссбраузерно.
Обнаруженные баги: в IE6 происходит небольшой прыжок верстки. Но при верстке можно строго зафиксировать контейнеры, в которых инпуты лежат и это не будет напрягать. Плюс неизвестно поведение различных запоминалок паролей при работе со скрытым инпутом. Потестил в 10 Опере встроенную запоминалку — работает нормально.
3. Картинка!
Если вас напрягает два инпута, мы можем попробовать следующий вариант: сделать для инпута с паролем бэкгарунд на котором написано слово «Пароль», а затем менять класс у инпута.
Вот такой станет наша форма:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ru">
<head>
<title>Тест</title>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
.noPass {
background-image:url('pass.gif');
}
</style>
</head>
<body>
<div>
<form action="index.html">
<p>
<input type="text" value="Логин" class="authFormInput authFormInputLogin" id="authFormInputLogin" name="authFormInputLogin" />
<input type="password" value="" class="authFormInput authFormInputPass noPass" id="authFormInputPass" name="authFormInputPass" />
<input type="submit" value="Войти в систему" />
</p>
</form>
</div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.На все это вешаем вот такой вот JavaScript:
window.onload = function() {
var authFormInputPass = document.getElementById('authFormInputPass');
authFormInputPass.onfocus = function() {
authFormInputPass.className="authFormInput authFormInputPass";
}
authFormInputPass.onblur = function() {
if (!authFormInputPass.value) {
authFormInputPass.className="authFormInput authFormInputPass noPass";
}
}
}
* This source code was highlighted with Source Code Highlighter.Тоже замечательно работает, нигде ничего не прыгает, запоминалки работают на ура.
Баги:
1. Разный рендеринг шрифтов в разных браузерах и ОС. Может получится так, что картинка с текстом «Пароль» будет выглядеть несколько иначе, чем весь основной текст на странице.
2.Пользователи, которые работают в Интернет с выключенными картинками. Но процент таких людей невероятно мал, да я думаю, они догадаются, что следующее поле после поля для логина — поле для пароля.
Кстати, на картинке в начале топика это реализовано именно таким методом.
