Due to my paranoid attitude towards sites and also for professional reasons, I use firefox + noscript. When I first visit some sites, I have js turned off and clicking on the field, to search where the inscription “search here” flaunts, I get a bummer. While I have a modern browser that supports the placeholder attribute without any problems. As a rule, there is such a horror everywhere: <input value = "Search on the site" onfocus = "if (this.value == 'Search on the site') this.value == ''" onblur = "if (this.value = = '') this.value == 'Search on the site' "> (echo of the end of the 90s).

The advanced of this world, carried this case beyond the limits of <input>, but the essence of this does not change. Even more advanced, removed the value from value and placed it in the title - it will be better. Fortunately, the guys who create the standards saw this business and decided to provide the tag with a special attribute placeholder for this purpose. The browser developers immediately implemented this functionality, but IE was on the road again. I think it’s worth reminding that there are not a few computers in the world where 6-IE dvinozavry are installed, not to mention 7 and even more so about 8. I also remind you that MSIE guys found this attribute an excess of luxury and did not include it even in the 9th version of. To get around all these misunderstandings and make life easier for you during page layout, I combined a small script. As you can see, it is based on jquery, but nothing can be done with the help of simple manipulations to redo it into another framework.

(function($) { /** * Ability for placeholder * usage: <input placeholder="any text"> */ $(function() { // if modernizr is available replace by var placeholder_support = Modernizr.input.placeholder; var placeholder_support = !!('placeholder' in document.createElement( 'input' )); if (!placeholder_support) { var inputs = $('input[placeholder]'), len = inputs.length, input, placeholder_class = 'placeholder'; while (len--) { inputs[len].value = inputs[len].value ? inputs[len].value : inputs.eq(len).addClass(placeholder_class).attr('placeholder'); inputs.eq(len).focus(function() { var th = $(this); if (this.value == th.attr('placeholder')) { th.removeClass(placeholder_class); this.value = ''; } }).blur(function() { var th = $(this); if (this.value == '') { th.addClass(placeholder_class); this.value = th.attr('placeholder'); } }); (function(input) { $(input.form).bind('submit', function() { if (input.value == $(input).attr('placeholder')) input.value = ''; }); }(inputs[len])); } } }); }(jQuery)); 

It is worth noting, maybe someone did not notice that the function with the active placeholdere adds the class placeholder, which can be used in conjunction with -webkit-input-placeholder, input :: - webkit-input-placeholder, input: -moz-placeholder.

PS: I don’t pretend in any way to the uniqueness of this solution, this is just a piece of code that I use in the layout, on the boilerplate.
')
UPD: Of all the kalivars, the only true note divorced here was from rwz , about what, the value override in such a way is wrong. This statement negates the universality of the above method. Therefore, I decided to quickly sketch another solution, devoid of these shortcomings.

 (function($) { $(function() { var placeholder_support = !!('placeholder' in document.createElement( 'input' )); if (!placeholder_support) { var body = $(document.body); $('input[placeholder]').each(function(){ var tpl = '<div class="placeholder" style="position:absolute;overflow:hidden;white-space:nowrap"/>', th = $(this), position = th.offset(), height = th.height(), width = th.width(), placeholder = $(tpl).appendTo(body) .css({ top: position.top, left: position.left, width: width, height: height, padding: ((th.innerHeight(true) - height) / 2) + 'px ' + ((th.innerWidth(true) - width) / 2) + 'px ' }) .text(th.attr('placeholder')) .addClass(th.attr('class')) ; placeholder.bind('click focus', function(){placeholder.hide();th.focus();}); th.bind('blur', function(){if (th.val() == '') placeholder.show()}); }); } }); }(jQuery)); 

What to consider when using this method:

1. The .placeholder class should be assigned the same size and line-height as its input. All input classes are copied to the placeholdera div.
2. Wrong position when scrolling if inpu is in a container with position: fixed. If necessary, corrected easily.
3. Well, respectively, the speed. Although tolerable, firefox showed 177ms scattered across 100 input pages (for the test, the attribute was changed to data-placeholder).
4. The minified code takes 597 bytes - if desired, you can still reduce

Perhaps there are other shortcomings or shortcomings, I will gladly read your comments and make the appropriate changes.

PPS: This article is not about whether js is enabled or not. This is a crutch for MSIE in particular and is possible for other browsers.