HTML5 attribute placeholder JS backwards compatible support (jquery version)

Placeholder is the HTML5 form characteristics of the more useful one, but suffer from its backward compatibility, so generally to do backward-compatible sites are not afraid to use, if useful to the place, is also a simple simulation with JS to achieve, then there is no one to solve the problem once and for all?

And then I'm going to take you to this program:

if inch return;

This code means to determine whether the placeholder property is supported, and if so, return without executing the code below.

if (This is thisreturn;

Of course, if the type of input is a button, there is no need to placeholder.

Next, we start to implement the

function (opts) {    = $.extend ({},opts);     return this. each (function() {        //main code    });  }

The code above is the basic code to write the extension $.fn plug-in, the following method will be placed in the jquery selector return value, that is, the $ (selector) inside the direct call.

Since $ () returns may be an array of jquery objects, the plug-in will typically be each,return as standard notation, allowing jquery to link up, such as $ (). function ().

The basic frame is set up, open and dry!

var_this = $ ( This);varPlaceholdertext = _this.attr (' placeholder ') | | ‘‘;if( This. Type = = ' Text ' | | This. Type = = ' Email ') {     This. Value =Placeholdertext; _this.on (' Focus ',function() {        if( This. Value = = Placeholdertext) This. Value = ' ';    }); _this.on (' Blur ',function() {        if( This. Value = = ") This. Value =Placeholdertext; });}

This is each input in each, first get the value of placeholder, and cache it up.

Judging type is ' text ' | | ' Email ' time to execute the following (HTML5 input type more, here first do the two support, here do not do email authentication);
The above code is a way to solve the common container, and then the most difficult type= ' password '.

varID = This. ID;if(id = = = ") {     This. id = ' Placeholderbuild_ ' +Base.supportid; ID= ' Placeholderbuild_ ' +Base.supportid;}varLabel = $ (' <label for= "' + ID + '" > ' + placeholdertext + ' </label> '));varCSS = {    ' Left ': 5-$ ( This). Outerwidth (true),    ' Width ': $ ( This). Outerwidth (true),    ' Height ': $ ( This). Outerheight (true),    ' Line-height ': $ ( This). Outerheight (true) + ' px ',    ' Position ': ' absolute ', opacity:' 0.5 '};varValim = $ (' <span></span> ')). css ({position:' Relative '}); Label.css (CSS). AppendTo (Valim); Valim.insertafter ($ ( This));$( This). On (' Focus ',function() {label.hide ();}). On (' Blur ',function() {    if( This. Value = = ") Label.show ();});

The assignment id,base is a global variable object.

The general idea is to create an empty <span> behind input, then append a label in the empty span and set the label's for ID to the ID of input (for the HTML5 attribute, so here is a slight contradiction).

The label is assigned a wide height, position, left,top,opacity and so on.

Then continue to bind the Focus,blur method.

It's so simple.

Called when, directly in the

$ (function () {
$ (' input '). Placeholdersupport ();
});

When there is an asynchronous DOM input that needs support, only the group will find this input, and then:
$ (input). Placeholdersupport ();

Code write is very old, not how to optimize, base can be replaced with $, you can also use their own global variable object.
Complete source code is attached:

Placeholdersupport:function() {            if(' Placeholder 'inchDocument.createelement (' input '))return  This; if(!base.supportid) {Base.supportid= 0; }            return  This. each (function(e) {Base.supportid++; if( This. Type = = ' Submit ' | | This. Type = = ' button ' | | This. Type = = ' reset ')return; varPlaceholdertext = $ ( This). attr (' placeholder ') | | ‘‘; if( This. Type = = ' Text ' | | This. Type = = ' Email ') {                     This. Value =Placeholdertext; $( This). On (' Focus ',function() {                        if( This. Value = = Placeholdertext) This. Value = ' ';                    }); $( This). On (' Blur ',function() {                        if( This. Value = = ") This. Value =Placeholdertext;                }); } Else if(Placeholdertext!== ' && This. Type = = = ' Password ') {                    varID = This. ID; if(id = = = ") {                         This. id = ' Placeholderbuild_ ' +Base.supportid; ID= ' Placeholderbuild_ ' +Base.supportid; }                    varLabel = $ (' <label for= "' + ID + '" > ' + placeholdertext + ' </label> ')); varCSS = {                        ' Left ': 5-$ ( This). Outerwidth (true),                        ' Width ': $ ( This). Outerwidth (true),                        ' Height ': $ ( This). Outerheight (true),                        ' Line-height ': $ ( This). Outerheight (true) + ' px ',                        ' Position ': ' absolute ', opacity:' 0.5 '                    }; varValim = $ (' <span></span> ')). css ({position:' Relative '                    });                    Label.css (CSS). AppendTo (Valim); Valim.insertafter ($ ( This)); $( This). On (' Focus ',function() {label.hide (); }). On (' Blur ',function() {                        if( This. Value = = ") label.show ();                });        }            }); }

HTML5 attribute placeholder JS backwards compatible support (jquery version)