Подсказки в полях ввода - реализация placeholder на JQuery
Понадобилось сделать небольшую обёртку для полей ввода в HTML, чтобы по умолчанию в пустом поле стоял текст подсказки (ну например, "введите номер телефона"), при входе в поле строка очищалась, при выходе и пустом значении подсказка возвращалась, а если что-то введено,- значение оставалось.
Написал коротенькую функцию на javascript с использованием библиотеки JQuery. На вход подаётся объект JQuery и строка для подсказки, текст подсказки устанавливается в поле и применяется CSS класс "hint" для оформления подсказки.
function jquery_input_focus_unfocus_with_text(jquery_input,text){ // bind focus event wrapper jquery_input.bind('focus', function() { if ($(this).val()==text){ // remove input styles $(this).removeClass('hint'); // set empty $(this).val(''); }}); // bind unfocus event wrapper jquery_input.bind('focusout', function() { if ( ! $(this).val().length>0){ // set default text $(this).val(text); // set default input styles $(this).addClass('hint'); } }); // set default value if (jquery_input.val().length<=0 ){ jquery_input.val(text); } if (! jquery_input.hasClass('hint')){ jquery_input.addClass('hint'); }; };
Остаётся навесить на нужные INPUT'ы обработчики:
$(document).ready(function(){ jquery_input_focus_unfocus_with_text( $('#ajax_user'),'Фамилия, Имя' ); });
По-моему неплохо получилось. Начинаю любить jQuery. Хотя, всё что описано выше почти не имеет смысла, т.к. существует атрибут placeholder
Комментарии
Отправить комментарий