Разделы
Veselov CV | vvShop © 2008 – 2017
Контакты
email: igor@veselov.sumy.ua
skype: utz0r2
Вернуться
» » » Очистка поля input при фокусе на jQuery

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

Зы: убрал -)
#
Все прекрасно...Но ложка дегтя....
Когда пишешь в одном инпуте потом нажимаешь на другой то пропадает то что написал...
Бред....Нафига выставлять...Только время потратил на установку....
#
Александр, в вашем случае достаточно убрать из кода, это:
           .bind('blur', function() {    // обработка потери фокуса
                if ($(this).attr("value") == "") {
                    $(this).attr("
value", $(this).data("autoclear")).removeClass('autoclear-normalcolor');
                }
            });
#
вопрос. зачем
attr("value") ?
когда есть
val()
#
Atapin, можно и так
#
Решение для 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();
});
Оставить комментарий
Вверх