Просмотр поста

Подсказки в элементах формы.
Все наверное видели такие элементы формы, где уже есть какойто текст, который пропадает при передаче фокуса элементу, например, "Что у Вас нового?" Вконтакте. Так вот, это осуществляется при помощи атрибута placeholder

<input type="text" name="text" placeholder="Что у Вас нового?"/>

Но есть маленькая проблемка:
этот атрибут поддерживается только последними версиями браузеров, а разработчики IE вообще не слышали о таком атрибуте.
Так что же делать, если хочется рабочие кроссбраузерные подсказки? Выход прост: JavaScript, а в данном случае библиотека jQuery.

Собственно сам код:

$(document).ready(function(){
  $('input[placeholder], textarea[placeholder]').each(function(){
    if(!$(this).val().length)
        $(this).val($(this).attr('placeholder'));
    $(this).data('default', $(this).attr('placeholder')).removeAttr('placeholder')
    .focus(function(){
        if($(this).val() == $(this).data('default') || '')
            $(this).val('');
    }).blur(function(){
        if($(this).val() == '')
            $(this).val($(this).data('default'));
    });
  });
});

Сначала мы выполняем обход всех элементов имеющих атрибут placeholder, берем из него текст и вставляем как текст данного элемента формы. При передаче фокуса элементу, текст будет удален, а при уборе фокуса если текст не был введен в поле, то подсказка вернётся назад. Вот и всё.