Javascript: Подсказки внутри INPUT

Предисловие 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

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