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