In IE, JQuery plug-ins that support text box and Password box placeholder effects can be shared,
I wrote this plug-in a long time ago. It is implemented based on jQuery and is mainly used for implementing the placeholder effect in IE. It supports both text and password input boxes.
Placeholder is a new attribute added to HTML5. When this attribute is set in input, the content of this value will be displayed as a gray prompt in the text box. When the text box gets the focus, the text will disappear.
: Http://xiazai.jb51.net/201501/other/placeholderfriend.rar
The implementation code is as follows:
Copy codeThe Code is as follows:
(Function ($ ){
/**
* No blooming trees
*
*/
Var placeholderfriend = {
Focus: function (s ){
S = $ (s). hide (). prev (). show (). focus ();
Var idValue = s. attr ("id ");
If (idValue ){
S. attr ("id", idValue. replace ("placeholderfriend ",""));
}
Var clsValue = s. attr ("class ");
If (clsValue ){
S. attr ("class", clsValue. replace ("placeholderfriend ",""));
}
}
}
// Determine whether placeholder is supported
Function isPlaceholer (){
Var input = document. createElement ('input ');
Return "placeholder" in input;
}
// Unsupported code
If (! IsPlaceholer ()){
$ (Function (){
Var form = $ (this );
// Traverse all text boxes and add a placeholder Simulated Event
Var elements = form. find ("input [type = 'text'] [placeholder]");
Elements. each (function (){
Var s = $ (this );
Var pValue = s. attr ("placeholder ");
Var sValue = s. val ();
If (pValue ){
If (sValue = ''){
S. val (pValue );
}
}
});
Elements. focus (function (){
Var s = $ (this );
Var pValue = s. attr ("placeholder ");
Var sValue = s. val ();
If (sValue & pValue ){
If (sValue = pValue ){
S. val ('');
}
}
});
Elements. blur (function (){
Var s = $ (this );
Var pValue = s. attr ("placeholder ");
Var sValue = s. val ();
If (! SValue ){
S. val (pValue );
}
});
// Traverse all password boxes and add a simulated placeholder event
Var elementsPass = form. find ("input [type = 'Password'] [placeholder]");
ElementsPass. each (function (I ){
Var s = $ (this );
Var pValue = s. attr ("placeholder ");
Var sValue = s. val ();
If (pValue ){
If (sValue = ''){
// DOM does not support type modification. You need to copy the Password box attribute to generate a new DOM
Var html = this. outerHTML | "";
Html = html. replace (/\ s * type = (['"])? Password \ 1/gi, "type = text placeholderfriend ")
. Replace (/\ s *(? : Value | on [a-z] + | name) (= (['"])? \ S * \ 1 )? /Gi ,"")
. Replace (/\ s * placeholderfriend/, "placeholderfriend value = '" + pValue
+ "'" + "Onfocus = 'placeholderfriendfocus (this );'");
Var idValue = s. attr ("id ");
If (idValue ){
S. attr ("id", idValue + "placeholderfriend ");
}
Var clsValue = s. attr ("class ");
If (clsValue ){
S. attr ("class", clsValue + "placeholderfriend ");
}
S. hide ();
S. after (html );
}
}
});
ElementsPass. blur (function (){
Var s = $ (this );
Var sValue = s. val ();
If (sValue = ''){
Var idValue = s. attr ("id ");
If (idValue ){
S. attr ("id", idValue + "placeholderfriend ");
}
Var clsValue = s. attr ("class ");
If (clsValue ){
S. attr ("class", clsValue + "placeholderfriend ");
}
S. hide (). next (). show ();
}
});
});
}
Window. placeholderfriendfocus = placeholderfriend. focus;
}) (JQuery );
The example is as follows:
Copy codeThe Code is as follows:
<Html>
<Head>
<Script src = "jquery. js" type = "text/javascript"> </script>
<Script src = "placeholderfriend. js" type = "text/javascript"> </script>
</Head>
<Body>
<Input placeholder = "account/mobile phone number"> <br>
<Input placeholder = "password" type = "password">
</Body>
</Html>