Трудно представить современный сайт без интерактивности. И она состоит из множества мелких деталей, которые стали уже чуть ли не стандартом в web-строительстве. Одна из таких "фишек" - текстовое поле ввода, в котором по умолчанию прописана подсказка об ожидаемом содержимом, например, "введите текст для поиска". При клике на это поле текст подсказки убирается, а при уходе с него, если пользователь ничего не ввел, текст подсказки возвращается обратно. Такой способ экономит полезное место в дизайне, не загромождая его выносными подсказками, а также помогает пользователю лучше ориентироваться при заполнении различных форм. Классический вариант, который обычно используется на сайтах, выглядит примерно так:
<label for="search">Поиск по сайту:</label>
<input type="text" name="search" id="search" value="что ищем?"
onfocus="if(this.value==this.defaultValue){this.value='';}"
onblur="if(this.value==''){this.value=this.defaultValue;}">
Могут быть некоторые варианты в реализации, но основной принцип остается этот же. Алгоритм простейший: при получении фокуса полем ввода проверяется его содержимое. Если оно совпадает со значением, установленным в параметре value, то содержимое подменяется на пустую строку. При потере фокуса также выполняется обратная проверка, и если поле осталось пустым, то в него подставляется значение по умолчанию. Плюсы этого способа: минимальный код, работает с отключенными стилями, хорошая совместимость с различными браузерами. Но минусы тоже значительные: при отключенных скриптах поле ввода придется сперва вручную очистить, а затем уже вписать в него нужное значение, для смены оформления подсказки придется писать дополнительный код, при отправке формы без дополнительных проверок будет передано значение по умолчанию и в любом случае потребуется дополнительная обработка введенных данных на стороне сервера, особые поля типа пароля будут отображать звездочки вместо текста подсказки.
Поскольку минусы предыдущего способа перевешивают плюсы, то я взял и написал свой вариант, лишенный практически всех перечисленных недостатков. К минусам можно записать только громоздкий код, но в остальном все получилось просто замечательно. Основной HTML-код очень похож на классический вариант, за исключением нескольких дополнительных тегов, стилей и атрибутов:
<div class="smart_input">
<label for="login" id="login_tooltip">логин</label>
<input type="text" name="login" id="login" onfocus="hideTT(this);"
onblur="chkTT(this);">
</div>
<div class="smart_input">
<label for="passw" id="passw_tooltip">пароль</label>
<input type="password" name="passw" id="passw" onfocus="hideTT(this);"
onblur="chkTT(this);">
</div>
Главная особенность формирования кода: ID подсказки должен начинаться со строки ID поля, к которому она относится, с дописанной в конец строкой "_tooltip". Стили для этого кода можно включить в текст страницы или вынести в отдельный CSS-файл:
<style type="text/css">
.smart_input {
position: relative;
vertical-align: top;
}
.smart_input label {
position: absolute;
top: 0px;
left: 5px;
display: none;
cursor: text;
font-size: 16px;
font-family: Arial;
color: #AAAAAA;
}
</style>
Родительский div имеет атрибут relative, это позволяет позиционировать плавающий элемент с атрибутом absolute внутри него. В описании стилей вы можете выставить любой шрифт, цвет и размер подсказки. Первоначально подсказки имеют атрибут отображения "скрытый", это необходимо, чтобы поддерживать работоспособность метода при отключенных скриптах. Теперь добавляем интерактивность при помощи JavaScript:
<script type="text/javascript">
// Проверка заполнения поля
function chkTT(e) {
if (typeof(e)=='string') { e=document.getElementById(e); }
if (!e) { return false; }
document.getElementById(e.id+'_tooltip').style.display =
(e.value==''?'inline':'none');
}
// Спрятать подсказку
function hideTT(e) {
if (typeof(e)=='string') { e=document.getElementById(e); }
if (!e) { return false; }
document.getElementById(e.id+'_tooltip').style.display='none';
}
</script>
При получении фокуса полем ввода подсказка скрывается. При потере полем фокуса, управление передается обработчику, проверяется его содержимое, и, если оно не пустое, то стиль подсказки устанавливается скрытым, в противном случае подсказка отображается. Эта же функция используется для начальной инициализации всех подсказок:
<script type="text/javascript">
// Показать подсказки в полях ввода
chkTT('login');
chkTT('passw');
</script>
Функции инициализации должны вызываться после загрузки страницы, в качестве параметров передаются ID полей ввода, к которым добавляются подсказки. Способ протестирован и успешно работает в браузерах Internet Explorer 6-8, Firefox 2.x-3.x, Opera 8-10, Safari и Google Chrome.