Авто очистка поля ввода на jQuery
Микро плагин jQuery для полей форм
рейтинг: 9.3/10, голосов: 6
Проработав 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"
Пример реализации можно увидеть в шапке этого сайта - поле поиска.
Уважаемый, спасибо за статью.
все работает только при повторной загрузке страницы.
Скажите пожалуйста в чем может быть проблема.
С Уважением,
Дмитрий
а placeholder поставить религия не позволяет?
Статье чуть больше 3х лет ;) Почти музейный экспонат... :D
sththy
Hello joomla-book.ru administrator, Your posts are always well thought out.