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>

Скачать

Скрипт и пример использования на GitHub

Понравился пост? Купи мне кофе

Leonid Shevtsov