Long ago wrote this plug-in, based on jquery implementation, mainly used in IE to achieve placeholder effect, can support both text and password input box.
Placeholder is a new property in HTML5, when input sets the property, the content of the value is displayed as a gray hint in the text box, and the prompt text disappears when the text box gets the focus.
Download Address: Http://xiazai.jb51.net/201501/other/placeholderfriend.rar
The implementation code is as follows:
Copy Code code as follows:
(function ($) {
/**
* No flowering trees.
* 2012/11/28 15:12
*/
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 to support placeholder
function Isplaceholer () {
var input = document.createelement (' input ');
Return "placeholder" in input;
}
Unsupported Code
if (!isplaceholer ()) {
$ (function () {
var form = $ (this);
//Traverse all text boxes, add placeholder analog events
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);
& nbsp; }
}
});
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);
}
});
Iterate through all the password boxes and add placeholder mock events
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 and needs to copy the Password box properties 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);
Use is simple, examples are as follows:
Copy Code code as follows:
<script src= "Jquery.js" type= "Text/javascript" ></script>
<script src= "Placeholderfriend.js" type= "Text/javascript" ></script>
<body>
<input placeholder= "account/Mobile number" ><br>
<input placeholder= "password" type= "password" >
</body>