RSS   Twitter   Copiny   Copiny
Нашел ошибку? 

Выдели фрагмент текста с ошибкой или неточностью и нажми Ctrl+Enter!

Авто очистка поля ввода на jQuery

Микро плагин jQuery для полей форм

Проработав n-ое время программистом, все больше и больше приходит понимание того что простые вещи при разработке должны вылетать не задумываясь...

Вот одной из элементарных вещей считаю подсказку внутри текстового поля (input, textarea), которая пропадает при фокусе, а если ничего не введено, то возвращается обратно. Так же не плохо было б чтобы цвет подсказки был серым, а реального текста - черным, для наглядности.

Можно сделать так:

<input name="variable_name_2" type="text" value="Текст подсказки"  onblur="if(this.value==\'\') this.value=\'Текст подсказки\';" onfocus="if(this.value==\'Текст подсказки\') this.value=\'\';" />

<input name="variable_name_2" type="text" value="Текст подсказки"  onblur="if(this.value==\'\') this.value=\'Текст подсказки\';" onfocus="if(this.value==\'Текст подсказки\') this.value=\'\';" />

Что мне тут не нравиться?

  • очень много кода...
  • для каждого элемента нужно снова прописывать один и тот же код
  • инлайновое определение событий

По мне так лучше одинаковый повторяющийся функционал вынести в одно место, например в виде плагина jQuery, например такого:

(function($) {
    $.fn.autoClear = function () {
        // сохраняем во внутреннюю переменную текущее значение
        $(this).each(function() {
            $(this).data("autoclear", $(this).attr("value"));
        });
        $(this)
            .bind('focus', function() {   // обработка фокуса
                if ($(this).attr("value") == $(this).data("autoclear")) {
                    $(this).attr("value", "").addClass('autoclear-normalcolor');
                }
            })
            .bind('blur', function() {    // обработка потери фокуса
                if ($(this).attr("value") == "") {
                    $(this).attr("value", $(this).data("autoclear")).removeClass('autoclear-normalcolor');
                }
            });
        return $(this);
    }
})(jQuery)

$(function(){
    // привязываем плагин ко всем элементам с классом "autoclear"    
    $('.autoclear').autoClear();
});

А HTML код упрощается до следующего вида

<input name="variable_name_1" type="text" value="Текст подсказки" class="autoclear" />

<input name="variable_name_2" type="text" value="Текст подсказки" class="autoclear" />

+ небольшой CSS

.autoclear { color: #aaa; }
.autoclear-normalcolor { color: #000; }

В чем прелесть этого решения?

  • функционал полностью перенесен в скрипты JS, в элементе нужно только поставить класс (либо переписать селектор плагина)
  • новые элементы (например которые появились через ajax) 
  • изменить цвет текста можно с помощью класса "autoclear-normalcolor"

Пример реализации можно увидеть в шапке этого сайта - поле поиска.

Комментарии (3) Добавить комментарий
  • Дмитрий
    Дмитрий
    20 Ноября 2012, 01:11
     ↑  +1  ↓     ответ

    Уважаемый, спасибо за статью.

    все работает только при повторной загрузке страницы.

    Скажите пожалуйста в чем может быть проблема.

    С Уважением,

    Дмитрий

  • asdf@dd.sa
    asdf@dd.sa
    29 Июля 2013, 19:53
     ↑  0  ↓     ответ

    а placeholder поставить религия не позволяет?

    • smet.denis
      smet.denis (админ)
      29 Июля 2013, 22:39
       ↑  +1  ↓     ответ

      Статье чуть больше 3х лет ;) Почти музейный экспонат... :D

Оставить комментарий




* обязательно для заполнения

1 введенный почтовый адрес используется только для обратной связи при ответах в комментариях и сервиса gravatar.com
.