Javascript: Подсказки внутри INPUT 16 февраля 08

Второй обещанный скрипт с lyrified.com.

Вывод какого-то текста в <INPUT>, когда он пустой:

Как видите, работает и для <INPUT TYPE="password">

Постановка задачи: нужно, чтобы в пустом <INPUT> выводился приглушенным цветом какой-то текст, например, подсказка.

Разметка

Тут все просто:

  <input type="text" id="i_test">

Скрипт

Придется хранить несколько параметров для каждого поля, поэтому создаем глобальный массив

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>

Скачать

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