Based on jquery, it is mainly used to realize placeholder effect under IE, and can support both text and password input boxes. Placeholder is a new property of HTML5, and when input sets the property, the content of the value is displayed in the text box as a gray hint, and the text disappears when the text box gets the focus.
The implementation code is as follows:
(function ($) {
/**
* A tree without flowers
* 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 if 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 to add placeholder simulation 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);
}
}
});
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 to add placeholder simulation 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, you need to copy the Password box property, 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 use is simple, the HTML code is 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>
jquery plug-ins that support text box and password box placeholder effects under IE