Текст в input и textarea по умолчанию или замещающий текст. Placeholder.

Как часто нам приходится реализовывать замещающий текст (текст в поле ввода, который исчезает при фокусировке) для полей ввода? Да, практически, в каждом проекте. Чаще всего это бремя ложилось на JavaScript события onFocus и onBlur. Но с приходом и быстрым распространением HTML 5 объемы кода для реализации замещающего текста сводится к минимуму.

Это происходит благодаря новому атрибуту placeholder у <input> и <textarea>.

Итак, если вы уверены, что все пользователи вашего проекта используют “нормальные” браузеры, то для создания замещающего текста достаточно этого:

<input placeholder="Имя">
<input placeholder="Фамилия">
<textarea placeholder="Укажите информацию о себе"></textarea>

Но, как известно, в семье не без урода. IE не поддерживает вплоть по 9 версию. Opera и Safari – только последние версии. Для этого случая нам, как и обычно, приходится мудрить с JavaScript. Для начала напишем функцию, которая сможет проверить, можем ли мы в текущем браузере использовать атрибут placeholder для полей ввода:

function supportsAttribute(element, attribute) {
  var new_element = document.createElement(element);
  if (attribute in new_element) {
    return true;
  } else {
    return false;
  }
};

Теперь, используя её и любимый jQuery реализуем кроссбраузерный замещающий текст на примере <textarea>:

if (!supportsAttribute('textarea', 'placeholder')) {
  $("#input")
    .data("text", $("#input").text())
    .css("color", "#ccc")
    .focus(function() {
        var $el = $(this);
        if (this.value == $el.data("text")) {
          this.value = "";
        }
    })
    .blur(function() {
      if (this.value == "") {
          this.value = $(this).data("text");
      }
    });
} else {
  $("#input")
    .attr("placeholder", $("#input").text())
    .text("");
}

Отсюда не сложно понять как сделать это для <input>.

Хочу обрадовать, что есть способ реализовать placeholder еще быстрее и проще. Можно просто воспользоваться jQuery плагином Placeholder =)

Как это работает

(В браузерах с поддержкой placeholder)