Очистка поля 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
07.05.2011 at 14:37Где привью? На простом джаваскрипте разве не лучше было бы написать?
ЗЫ. Убери наконец отображение мыла для всех! Нехорошо это, спамливо это…
utz0r2
08.05.2011 at 13:32Kichrum,
1) писать (onblur, onfocus="if(this.value…)) для каждой ссылки – много, а тут просто класс проставить
2) стиль текста в инпуте до фокуса может быть любым
3)
Зы: убрал -)
Александр
09.05.2011 at 13:26Все прекрасно…Но ложка дегтя….
Когда пишешь в одном инпуте потом нажимаешь на другой то пропадает то что написал…
Бред….Нафига выставлять…Только время потратил на установку….
utz0r2
09.05.2011 at 15:51Александр, в вашем случае достаточно убрать из кода, это:
if ($(this).attr("value") == "") {
$(this).attr("
value", $(this).data("autoclear")).removeClass('autoclear-normalcolor');
}
});
Atapin
11.12.2011 at 11:51вопрос. зачем
attr("value") ?
когда есть
val()
utz0r2
11.12.2011 at 12:52Atapin, можно и так
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();
});