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:

Copy code The code is as follows:

(function($) {
/**
* Trees 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 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:

Copy code The code is as follows: