Javascript: Подсказки внутри INPUT
February 16, 2008, revised June 17, 2011 HTML HTML5 JavaScript lyrified placeholderПредисловие 2011 года
К счастью, все современные обозреватели поддерживают атрибут placeholder
,
позволяющий задать подсказку внутри <input>
очень просто и без Javascript:
<input type="text" placeholder="тут пока пусто" />
Пожалуйста, используйте именно этот способ.
Если хочется поддерживать и не очень современные браузеры, например, IE младше девятки, придется подмешивать немного Javascript
для совместимости. Если ты используешь jQuery, для него есть отличный плагин jQuery.placeholder.
Преимущество такого подхода в том, что, если браузер сам поддерживает свойство placeholder
, то никакого яваскрипта ему не
понадобится. А еще в том, что плагин этот подхватывает подсказки непосредственно из HTML, и их не нужно объявлять отдельно, как делал это я в своем скрипте.
Именно так и реализованы подсказки в полях формы для добавления комментариев на этом блоге.
Для истории и для людей, желающих сделать подсказки с особым цинизмом, оставляю оригинал статьи. Исходники тоже старые – такие вот скрипты я писал три года назад.
Статья 2008 года
Вывод какого-то текста в <input>
, когда он пустой.
Скрипт взят с написанного мной в 2008 году песенного архива lyrified.com.
Постановка задачи: нужно, чтобы в пустом <input>
выводился приглушенным цветом какой-то текст, например, подсказка.
HTML-разметка
Тут все просто:
<input type="text" id="i_test" />
Javascript
Придется хранить несколько параметров для каждого поля, поэтому создаем глобальный массив.
var fields=Array();
Чтобы добавить конкретное поле в этот массив, используем функцию:
function inputHint_init(id,emptyValue)
{
inputField=document.getElementById(id);
fields[id]=new Array();
//значение поля, когда оно пустое
fields[id]["emptyValue"]=emptyValue;
//находится ли фокус вводе в поле
fields[id]["isFocused"]=false;
//привязываем обработчики событий
inputField.onfocus=inputHint_focus;
inputField.onblur=inputHint_blur;
if (inputField.value=="")
{
//изначально поле пустое
//заполняем подсказкой и меняем цвет
inputField.value=emptyValue;
inputField.style.color='#aaaaaa';
fields[id]["isEmpty"]=true;
} else {
//изначально поле не пустое
fields[id]["isEmpty"]=false;
}
}
Обратите внимание, для того, чтобы определить, пустое поле или нет, уже нельзя проверить
value==''
. Поэтому нужно написать функцию:
function inputHint_isEmpty(id)
{
return fields[id]["isFocused"]?
//если фокус в поле - там находится настоящий текст
(document.getElementById(id).value==''):
//если же нет - проверяем флажок
fields[id]["isEmpty"];
}
Обработчик события onFocus: если поле было пустым (но в нем отображалась подсказка), при получении фокуса его нужно очистить.
Кроме того, выставляется флажок isFocused
.
function inputHint_focus(e)
{
if (e == null) { e = window.event }
element = (e.target != null) ? e.target : e.srcElement;
fields[element.id]["isFocused"]=true;
if (fields[element.id]["isEmpty"])
{
element.style.color='#000000';
element.value='';
}
}
Обработчик события onBlur: если пользователь закончил редактирование поля и оставил его пустым, нужно вернуть подсказку.
Флажок isFocused
снимается.
function inputHint_blur(e)
{
if (e == null) { e = window.event }
element = (e.target != null) ? e.target : e.srcElement;
if (element.value=='')
{
fields[element.id]["isEmpty"]=true;
element.value=fields[element.id]["emptyValue"];
element.style.color='#aaaaaa';
} else {
fields[element.id]["isEmpty"]=false;
}
fields[element.id]["isFocused"]=false;
}
Использование
Для каждого задействованного поля вызываем функцию inputHint_init
:
<script type="text/javascript">
inputHint_init("i_test","тут пока пусто");
</script>