jquery encapsulates the placeholder effect, allowing the low-version browser to support the effect

The default prompt text of the input box on the page is generally used as placeholder a property, i.e.:

<type= "text"  name= "username"  placeholder= " Please enter the user name "  value=" "  ID=" username "/>

The color of the default text under the DOT style control

Input::-webkit-input-placeholder {color:#AAAAAA;}

But in the lower version of the browser does not support this placeholder property, then really want to be in the lower version of the browser to achieve placeholder the same effect, you need to write a plug-in to be compatible with, the following detailed how to use jquery to achieve this simulation effect.

To achieve this simulation effect, the general way the page is called:

$ (' input '). placeholder ();

First, write the general structure of the jquery plugin first:

;(function($) {    function() {        // Implement placeholder code      }}) (JQuery)

Below we will determine whether the browser supports placeholder属性 .

;(function   ($) {$.fn.placeholder  = function   () { function   { var  _this = this  ;  var  supportplaceholder = ' placeholder '             In  document.createelement (' input '  if  (! //  Placeho not supported    Operation of the Lder property   

We want to support chained operations, as follows:

;(function($) {$.fn.placeholder=function(){         return  This. each (function(){            var_this = This; varSupportplaceholder = ' placeholder 'inchDocument.createelement (' Input '); if(!Supportplaceholder) {                //operations that do not support the placeholder property            }        }); }}) (JQuery)

Default configuration items:

options = $.extend ({    placeholdercolor:' #aaaaaa ',    Isspan:false// whether to use the insert span tag to simulate placeholder, which is not required    by default Oninput:true// Real-time monitoring input box },options);

If you don't need to simulate the placeholder effect through span, you need to use the value of the input box to determine the following code:

if(!Options.isspan) {$ (_this). Focus (function () {        varPattern =NewRegExp ("^" + defaultvalue + "$|^$"); Pattern.test ($ (_this). Val ())&& $ (_this). Val ('). CSS (' Color ', DefaultColor); }). blur (function () {        if($ (_this). val () = =DefaultValue) {$ (_this). CSS (' Color ', DefaultColor); }        Else if($ (_this). Val (). length = = 0{$ (_this). Val (defaultvalue). CSS (' Color ', Options.placeholdercolor)} }). Trigger (' Blur ');}

If you need the same span tag to simulate placeholder the effect, the code looks like this:

var$simulationSpan = $ (' <span class= "Wrap-placeholder" > ' +defaultvalue+ ' </span> '); $simulationSpan. css ({' Position ': ' absolute ',    ' Display ': ' Inline-block ',    ' Overflow ': ' Hidden ',    ' Width ': $ (_this). Outerwidth (),' Height ': $ (_this). Outerheight (),' Color ': Options.placeholdercolor,' Margin-left ': $ (_this). CSS (' margin-left ')),    ' Margin-top ': $ (_this). CSS (' margin-top ')),    ' Padding-left ':p arseint ($ (_this). CSS (' padding-left ')) + 2 + ' px ',    ' Padding-top ': _this.nodename.tolowercase () = = ' textarea '? parseint ($ (_this). CSS (' padding-top ')) + 2:0,    ' Line-height ': _this.nodename.tolowercase () = = ' textarea '? $ (_this). CSS (' Line-weight '): $ (_this). Outerheight () + ' px ',    ' Font-size ': $ (_this). CSS (' font-size ')),    ' Font-family ': $ (_this). CSS (' font-family ')),    ' Font-weight ': $ (_this). CSS (' font-weight '))});//Add the current $simulationspan to $ (_this) by before and let $ (_this) Focus$ (_this). Before ($simulationSpan. Click (function() {$ (_this). Trigger (' Focus ');}));//simulates span hiding when the current input box is not empty in focus text content$ (_this). Val (). length! = 0 &&$simulationSpan. Hide ();if(options.oninput) {//Binding Oninput/onpropertychange Events    varInputchangeevent =typeof(_this.oninput) = = = ' object '? ' Input ': ' PropertyChange '; $ (_this). Bind (Inputchangeevent,function() {$simulationSpan [0].style.display = $ (_this). Val (). length! = 0? ' None ': ' Inline-block '; });}Else{$ (_this). Focus (function() {$simulationSpan. Hide (); }). blur (function () {        /^$/.test ($ (_this). Val ()) &&$simulationSpan. Show (); });};

Overall code:

;(function($) {$.fn.placeholder=function(options) {Options=$.extend ({placeholdercolor:' #aaaaaa ', Isspan:false,//whether to use the insert span tag to simulate placeholder, which is not required by defaultOninput:true //Real-time listening input box},options); return  This. each (function(){            var_this = This; varSupportplaceholder = ' placeholder 'inchDocument.createelement (' Input '); if(!Supportplaceholder) {                //operations that do not support the placeholder property                varDefaultValue = $ (_this). attr (' placeholder '); varDefaultColor = $ (_this). CSS (' Color '); if(!Options.isspan) {$ (_this). Focus (function () {                        varPattern =NewRegExp ("^" + defaultvalue + "$|^$"); Pattern.test ($ (_this). Val ())&& $ (_this). Val ('). CSS (' Color ', DefaultColor); }). blur (function () {                        if($ (_this). val () = =DefaultValue) {$ (_this). CSS (' Color ', DefaultColor); }                        Else if($ (_this). Val (). length = = 0{$ (_this). Val (defaultvalue). CSS (' Color ', Options.placeholdercolor)} }). Trigger (' Blur '); }Else{                    var$simulationSpan = $ (' <span class= "Wrap-placeholder" > ' +defaultvalue+ ' </span> '); $simulationSpan. css ({' Position ': ' absolute ',                        ' Display ': ' Inline-block ',                        ' Overflow ': ' Hidden ',                        ' Width ': $ (_this). Outerwidth (),' Height ': $ (_this). Outerheight (),' Color ': Options.placeholdercolor,' Margin-left ': $ (_this). CSS (' margin-left ')),                        ' Margin-top ': $ (_this). CSS (' margin-top ')),                        ' Padding-left ':p arseint ($ (_this). CSS (' padding-left ')) + 2 + ' px ',                        ' Padding-top ': _this.nodename.tolowercase () = = ' textarea '? parseint ($ (_this). CSS (' padding-top ')) + 2:0,                        ' Line-height ': _this.nodename.tolowercase () = = ' textarea '? $ (_this). CSS (' Line-weight '): $ (_this). Outerheight () + ' px ',                        ' Font-size ': $ (_this). CSS (' font-size ')),                        ' Font-family ': $ (_this). CSS (' font-family ')),                        ' Font-weight ': $ (_this). CSS (' font-weight '))                    }); //Add the current $simulationspan to $ (_this) by before and let $ (_this) Focus$ (_this). Before ($simulationSpan. Click (function() {$ (_this). Trigger (' Focus ');                    })); //simulates span hiding when the current input box is not empty in focus text content$ (_this). Val (). length! = 0 &&$simulationSpan. Hide (); if(options.oninput) {//Binding Oninput/onpropertychange Events                        varInputchangeevent =typeof(_this.oninput) = = = ' object '? ' Input ': ' PropertyChange '; $ (_this). Bind (Inputchangeevent,function() {$simulationSpan [0].style.display = $ (_this). Val (). length! = 0? ' None ': ' Inline-block ';                    }); }Else{$ (_this). Focus (function() {$simulationSpan. Hide (); }). blur (function () {                            /^$/.test ($ (_this). Val ()) &&$simulationSpan. Show ();                    });                };    }            }        }); }}) (JQuery);

The method of invocation, which needs to be simulated by the span tag:

$ ("#username"). Placeholder ({    Isspan:true});

jquery encapsulates the placeholder effect, allowing the low-version browser to support the effect