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

Главная » Блог » JavaScript » Очистка поля 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();
});

ДЕМО

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

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

Kichrum• 7 мая 2011 14:37

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

Зы: убрал -)

utz0r2• 8 мая 2011 13:32

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

Александр• 9 мая 2011 13:26

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

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

utz0r2• 9 мая 2011 15:51

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

Atapin• 11 декабря 2011 11:51

Atapin, можно и так

utz0r2• 11 декабря 2011 12:52

Решение для 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();
});

JVLNS• 12 октября 2013 00:33

DEV.XFOR.TOP

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