Подсказки в полях ввода - реализация 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 

Комментарии

Популярные сообщения