Делаем замену текста внутри input — полей ввода (кроссбраузерный placeholder)

Иногда возникает необходимость в форме сделать внутри ее элементов (input, textarea) текст, который бы исчезал при нажатии на элемент, то есть когда фокус на input. В html5 есть замечательный атрибут для элементов формы — placeholder, но беда в том, что это работает не во всех браузерах, ведь html5 — это новый формат.

Решается проблема подключением плагина jquery — placeholder, код которого ниже.

(function(b){function d(a){this.input=a;a.attr("type")=="password"&&this.handlePassword();b(a[0].form).submit(function(){if(a.hasClass("placeholder")&&a[0].value==a.attr("placeholder"))a[0].value=""})}d.prototype={show:function(a){if(this.input[0].value===""||a&&this.valueIsPlaceholder()){if(this.isPassword)try{this.input[0].setAttribute("type","text")}catch(b){this.input.before(this.fakePassword.show()).hide()}this.input.addClass("placeholder");this.input[0].value=this.input.attr("placeholder")}},
hide:function(){if(this.valueIsPlaceholder()&&this.input.hasClass("placeholder")&&(this.input.removeClass("placeholder"),this.input[0].value="",this.isPassword)){try{this.input[0].setAttribute("type","password")}catch(a){}this.input.show();this.input[0].focus()}},valueIsPlaceholder:function(){return this.input[0].value==this.input.attr("placeholder")},handlePassword:function(){var a=this.input;a.attr("realType","password");this.isPassword=!0;if(b.browser.msie&&a[0].outerHTML){var c=b(a[0].outerHTML.replace(/type=(['"])?password\1/gi,
"type=$1text$1"));this.fakePassword=c.val(a.attr("placeholder")).addClass("placeholder").focus(function(){a.trigger("focus");b(this).hide()});b(a[0].form).submit(function(){c.remove();a.show()})}}};var e=!!("placeholder"in document.createElement("input"));b.fn.placeholder=function(){return e?this:this.each(function(){var a=b(this),c=new d(a);c.show(!0);a.focus(function(){c.hide()});a.blur(function(){c.show(!1)});b.browser.msie&&(b(window).load(function(){a.val()&&a.removeClass("placeholder");c.show(!0)}),
a.focus(function(){if(this.value==""){var a=this.createTextRange();a.collapse(!0);a.moveStart("character",0);a.select()}}))})}})(jQuery);

Далее нужно будет вызвать функцию placeholder() для тех элементов, к которым вы хотите добавить атрибут placeholder.

$('input[placeholder], textarea[placeholder]').placeholder();

Ну и конечно, чтобы все это работало, не забываем подключить jquery.

Есть возможность применить стили, то есть стилизовать placeholder, но пока это работает только для Chrome, Safari (и др. webkit браузеров) и Firefox.

::-webkit-input-placeholder  {
   color: red;
}
input:-moz-placeholder {
   color: red;
}

Похожие статьи

Статья оказалась полезной? Вырази благодарность - поделись в соцсетях

Отзывы : 2 комментария

  1. Спасибо за статью, но хотелось бы видеть реальные коды программирования 🙂

    • Реальные коды конкретно по теме этой статьи? Боюсь здесь ничего особого не напишешь, все заключается в выборе нужного объекта, например $(‘input’) и указании ему метода placeholder().
      Или это в общем пожелание сайту?

Комментирование отключено