Очистка поля input при фокусе на jQuery

Очистка поля input при фокусе на jQuery

HTML

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

CSS

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

JS 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);
    }
});

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

ДЕМО

0 comments
  1. Kichrum
    Kichrum
    07.05.2011 at 14:37

    Где привью? На простом джаваскрипте разве не лучше было бы написать?

    ЗЫ. Убери наконец отображение мыла для всех! Нехорошо это, спамливо это…

    Reply
  2. utz0r2
    utz0r2
    08.05.2011 at 13:32

    Kichrum,
    1) писать (onblur, onfocus="if(this.value…)) для каждой ссылки – много, а тут просто класс проставить
    2) стиль текста в инпуте до фокуса может быть любым
    3) Привью

    Зы: убрал -)

    Reply
  3. Александр
    Александр
    09.05.2011 at 13:26

    Все прекрасно…Но ложка дегтя….
    Когда пишешь в одном инпуте потом нажимаешь на другой то пропадает то что написал…
    Бред….Нафига выставлять…Только время потратил на установку….

    Reply
  4. utz0r2
    utz0r2
    09.05.2011 at 15:51

    Александр, в вашем случае достаточно убрать из кода, это:

               .bind('blur', function() {    // обработка потери фокуса
                    if ($(this).attr("value") == "") {
                        $(this).attr("
    value", $(this).data("autoclear")).removeClass('autoclear-normalcolor');
                    }
                });

    Reply
  5. Atapin
    Atapin
    11.12.2011 at 11:51

    вопрос. зачем
    attr("value") ?
    когда есть
    val()

    Reply
  6. utz0r2
    utz0r2
    11.12.2011 at 12:52

    Atapin, можно и так

    Reply
  7. JVLNS
    JVLNS
    12.10.2013 at 00:33

    Решение для textarea и input (в приведенных выше примерах не работает очистка текстовых полей).

    Для jQuery:

    // Чистка форм
    $(function($) {
    $.fn.autoClear = function () {
    // сохраняем во внутреннюю переменную текущее значение
    $(this).each(function() {
    $(this).data("autoclear", $(this).val());
    });
    $(this)
    .bind('focus', function() { // обработка фокуса
    // alert($(this).val());
    if ($(this).val() == $(this).data("autoclear")) {
    if($(this).is("textarea")) // проверяем является ли кликнутый элемент textarea
    $(this).text("").addClass('autoclear-normalcolor');
    if($(this).is("input")) $(this).attr("value", "").addClass('autoclear-normalcolor');
    }
    })

    .bind('blur', function() { // обработка потери фокуса
    if ($(this).val() == "") {
    if($(this).is("textarea")) $(this).text($(this).data("autoclear")).removeClass('autoclear-normalcolor');
    if($(this).is("input")) $(this).attr("value",$(this).data("autoclear")).removeClass('autoclear-normalcolor');
    }
    });
    return $(this);
    }
    });

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

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

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *

Scroll Up