jquery plugin for placeholder effects across browsers

Once encountered such a problem, handle IE8 Password box placeholder property compatibility. After a few setbacks, this solution can solve the problem.

1, JSP page introduced JS plugin

<type= "Text/javascript"  src= "<%=basepath%>/login.js " ></ Script >

2. Page initialization code

<script type= "Text/javascript" >//input Hint Info effect plug-in for IE8 processing $ (function() {         if in document.createelement (' input '))) {             $ (' #password '). Placeholder ({ Isusespan:true});        }            ); </script>

3. Page Tag Code

<id= "password"  name= "J_password"  class= "Input_ Text Input_open "  placeholder=" Please enter password "  type=" password "  > 

4. Plugin Placeholder.js

/** * jquery enplaceholder plug * jquery plugin for placeholder effect across browsers * Version 1.0 *}*/ ////var defaultvalue = "Account"; (function($) {$.fn.extend ({"Placeholder":function(options) {Options=$.extend ({placeholdercolor:' #BABABA ',//#ACA899Isusespan:false,//whether to use the insert span tag to simulate placeholder, by default false, by default using value impersonationOninput:true  //whether to bind Oninput event instead of Focus/blur event when using tag emulation (Isusespan to True)}, Options); $( This). each (function () {                  var_this = This; varSupportplaceholder = ' placeholder 'inchDocument.createelement (' Input '); if(!Supportplaceholder) {                      varDefaultValue = $ (_this). attr (' placeholder '); //undefined problem when no placeholder is fixed                    if(DefaultValue! =NULL&&typeof(defaultvalue)! = "undefined"){                          varDefaultColor = $ (_this). CSS (' Color '); if(Options.isusespan = =false) {$ (_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$imitate = $ (' <span class= ' wrap-placeholder ' style= ' Position:absolute; left:85px; display:inline-block; overflow: Hidden Color: ' +options.placeholdercolor+ '; Width: ' +$ (_this). Outerwidth () + ' px; Height: ' +$ (_this). Outerheight () + ' px; " > ' + defaultvalue + ' </span> '); $imitate. css ({' Margin-left ': $ (_this). CSS (' margin-left ')),                                  ' Margin-top ': $ (_this). CSS (' margin-top ')),                                  ' Font-size ': $ (_this). CSS (' font-size ')),                                  ' Font-family ': $ (_this). CSS (' font-family ')),                                  ' Font-weight ': $ (_this). CSS (' font-weight ')),                                  ' Padding-left ':p arseint ($ (_this). CSS (' padding-left ')) + 2 + ' px ',                                  ' Line-height ': _this.nodename.tolowercase () = = ' textarea '? $ (_this). CSS (' Line-weight '): $ (_this). Outerheight () + ' px ',                                  ' Padding-top ': _this.nodename.tolowercase () = = ' textarea '? parseint ($ (_this). CSS (' padding-top ')) + 2:0                              }); $ (_this). Before ($imitate. Click (function() {$ (_this). Trigger (' Focus ');                                })); $ (_this). Val (). Length! = 0 &&$imitate. Hide (); if(options.oninput) {//Binding Oninput/onpropertychange Events                                varInputchangeevent =typeof(_this.oninput) = = = ' object '? ' Input ': ' PropertyChange '; $ (_this). Bind (Inputchangeevent,function() {$imitate [0].style.display = $ (_this). Val (). length! = 0? ' None ': ' Inline-block ';                              }); } Else{$ (_this). Focus (function() {$imitate. Hide (); }). blur (function () {                                          /^$/.test ($ (_this). Val ()) &&$imitate. Show ();                              });              }                          }                      }                  }              }); return  This;  }      });   }) (JQuery); 

5. GAME over

jquery plugin for placeholder effects across browsers