Home > Web Front-end > JS Tutorial > body text

Share the JQuery plug-in that supports text box and password box placeholder effects under IE_jquery

WBOY
Release: 2016-05-16 16:16:39
Original
1028 people have browsed it

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:












Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template