Удаление/возвращение вспомогательного текста из строки поиска

Материал из JQuery

Перейти к: навигация, поиск

Строка поиска в большинстве сайтов содержит вспомогательный текст (обычно "поиск" или "введите текст"), который автоматически пропадает при получении фокуса текстовым полем и автоматически возвращается, если это поле теряет фокус и при этом не содержит введенных символов. С помощью jQuery можно очень просто организовать такое поведение:

var searchDefaultText = "Поиск..."; 
$("#searchField") // - найдем элемент текстового поля поиска
    .val(searchDefaultText) // - поместим в него нужный текст
    .css("color", "#ccc") // - изменим цвет шрифта на серый
    .focus(function(){ // - установим обработчик получения фокуса
        $(this).css("color", "black");
        if ($(this).val() == searchDefaultText){
            $(this).val("");
        }
    })
    .blur(function(){ // - установим обработчик потери фокуса
        $(this).css("color", "#ccc");
        if ($(this).val() == ""){
            $(this).val(searchDefaultText);
        }
    });

Используемые методы jQuery