让老IE支持HTML5的PlaceHolder属性（JQUERY插件）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

// ie placeholder
(function ($) {

  $.fn.placeholder = function (options) {
    var defaults = {
      pColor: "#ccc",
      pActive: "#999",
      pFont: "12px",
      activeBorder: "#080",
      posL: 8,
//      textAlign: "right",
      zIndex: "99"
    },
    opts = $.extend(defaults, options);
    //
    return this.each(function () {
      if (window.support_placeholder) return;
      $(this).parent().css("position", "relative");
      var isIE = !window.support_placeholder;

      //不支持placeholder的浏览器
      var $this = $(this),
          msg = $this.attr("placeholder"),
          iX = $this.position().left + (Number($this.css('marginLeft').replace('px', '')) || 0),
          iY = $this.position().top + (Number($this.css('marginTop').replace('px', '')) || 0),
          iH = $this.outerHeight(),
          iW = $this.outerWidth(),
          oInput = $("<label>", {
            "text": msg,
            "css": {
              "position": "absolute",
              "left": iX + "px",
              "top": iY + "px",
//              "width": iW - opts.posL + "px",
//              "padding-left": opts.posL + "px",
              "height": iH + "px",
              "line-height": iH + "px",
              "color": opts.pColor,
              "font-size": opts.pFont,
              "z-index": opts.zIndex,
              "text-align": opts.textAlign,
              "cursor": "text",
              'font-size': $this.css('fontSize'),
              'text-align': $this.css('textAlign'),
              'padding-left': $this.css('paddingLeft'),
              'padding-right': $this.css('paddingRight'),
              'width': iW
            }
          }).insertBefore($this);
      //初始状态就有内容
      var value = $this.val();
      if (value.length > 0) {
        oInput.hide();
      };

      //
      $this.on("focus", function () {
        var value = $(this).val();
        if (value.length > 0) {
          oInput.hide();
        }
        oInput.css("color", opts.pActive);
        //

        function eventListener () {
          var value = $(this).val();
          if (value.length == 0) {
            oInput.show();
          } else {
            oInput.hide();
          }
        }

        $(this).on("propertychange", eventListener).on("input", eventListener);

      }).on("blur", function () {
        var value = $(this).val();
        if (value.length == 0) {
          oInput.css("color", opts.pColor).show();
        }
      });
      //
      oInput.on("click", function () {
        $this.trigger("focus");
        $(this).css("color", opts.pActive)
      });
      //
      $this.filter(":focus").trigger("focus");
    });
  }

  // 修正 placeholder问题
  $(":input[placeholder]").each(function () {
    $(this).placeholder();
  });

})(jQuery);

1
2
3
4
5
6

  // 修正老版本IE不支持placeholder属性
  Modernizr.test({
    test: Modernizr.input.placeholder,
    nope: 'placeholder.js'
  });