Home > Article > Web Front-end > Share the JQuery plug-in that supports text box and password box placeholder effects under IE_jquery
I wrote this plug-in a long time ago. It is based on jQuery and is mainly used to implement placeholder effects under IE. It can support both text and password input boxes.
Placeholder is a new attribute in HTML5. When the input attribute is set, the content of the value will be displayed in the text box as a gray prompt. When the text box gets focus, the prompt text disappears.
Download address: http://xiazai.jb51.net/201501/other/placeholderfriend.rar
The implementation code is as follows:
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 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 and 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 attributes and generate a new DOM
var html = this.outerHTML || "";
html = html.replace(/s*type=(['"])?password1/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);
It is very simple to use, the example is as follows: