jQuery сниппеты: Input Placeholder

Сейчас стало модным писать сниппеты - маленькие, полезные кусочки кода, облегчающие жизнь. Этим постом открываю раздел посвящённый сниппетам jQuery.

При обработке форм на стороне клиента нужно при получении фокуса элементом проверить изменился ли атрибут value по сравнению с дефолтным. Если не изменился очистить поле для ввода новой информации, если изменился — оставить без изменений. При потере фокуса проверить поле на пустоту. Если оно осталось не заполненным, вернуть его значение к дефолтному.

Такие операции обычно проделывают для поля поиска по сайту, чтобы отслеживать значение атрибута value, которое по умолчанию равно «Поиск…».

Пример написан под jQuery ≤ 1.4 (хотя работоспособен и в новой версии фреймворка)

HTML:


<input type="text" class="swap" value="Поиск..." />

JavaScript:


// Массив для хранения
swaps = [];
$(".swap").each(function(i){
    swaps[i] = $(this).val();
    // Получение фокуса полем
    $(this).focusin(function(){
        if ($(this).val() == swaps[i]) {
            $(this).val("");
        }
    // Потеря фокуса полем
    }).focusout(function(){
        if ($.trim($(this).val()) == "") {
            $(this).val(swaps[i]);
        }
    });
});

UPD: При использовании jQuery ≥ 1.4 необходимо заменить события focusin, focusout на focus, blur соответственно.

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • В тексте написано «…изменился ли атрибут title…»? Надо не title, а value 🙂

    • Александр, спасибо. Поправил.