（二）给IE6-IE9中的input添加HTML5新属性-placeholder

　　同样是最近遇到的一个小问题。因为IE9以下input是不支持placeholder属性的。在网上找到了解决方案，果断带走。正如鲁迅先生所说的‘拿来主义’：运用脑髓，放出眼光，自己来拿！感谢。借花献佛在这里记录分享下。

　　用法很简单，在代码中引入placeholder.js，并加入后面的一段代码就行了。

 1 <script src="jquery-1.11.3.js"></script>
 2 <!--IE8-IE6支持html5 placeholder新属性 引入脚本及相应功能代码-->
 3 <script src="placeholder.js"></script>
 4 <script>
 5 //    使IE8-IE6支持html5 placeholder新属性
 6     $(function(){
 7         var support = (function(input) {
 8             return function(attr) { return attr in input }
 9         })(document.createElement(‘input‘))
10         if ( !(support(‘placeholder‘) && $.browser.webkit) ) {
11             $(‘input[placeholder],textarea[placeholder]‘).placeholder({
12                 useNative: false,
13                 hideOnFocus: false,
14                 style: {
15                     textShadow: ‘none‘
16                 }
17             });
18         }
19
20         if ( !support(‘autofocus‘) ) {
21             $(‘input[autofocus]‘).focus()
22         }
23     });

其中placeholder.js的源码如下：

  1 (function ($) {
  2     var attr = ‘placeholder‘, nativeSupported = attr in document.createElement(‘input‘)
  3
  4     $.fn.placeholder = function (options) {
  5         return this.each(function () {
  6             var $input = $(this)
  7
  8             if ( typeof options === ‘string‘ ) {
  9                 options = { text: options }
 10             }
 11
 12             var opt = $.extend({
 13                 text     : ‘‘,
 14                 style    : {},
 15                 namespace: ‘placeholder‘,
 16                 useNative: true,
 17                 hideOnFocus: true
 18             }, options || {})
 19
 20             if ( !opt.text ) {
 21                 opt.text = $input.attr(attr)
 22             }
 23
 24             if (!opt.useNative) {
 25                 $input.removeAttr(attr)
 26             }else if ( nativeSupported ) {
 27
 28                 $input.attr(attr, opt.text)
 29                 return
 30             }
 31
 32             var width     = $input.width(), height = $input.height()
 33             var box_style = [‘marginTop‘, ‘marginLeft‘, ‘paddingTop‘, ‘paddingLeft‘, ‘paddingRight‘]
 34
 35             var show      = function () { $layer.show() }
 36             var hide      = function () { $layer.hide() }
 37             var is_empty  = function () { return !$input.val() }
 38             var check     = function () { is_empty() ? show() : hide() }
 39
 40             var position  = function () {
 41                 var pos = $input.position()
 42                 if (!opt.hideOnFocus) {
 43
 44                     pos.left += 2
 45                 }
 46                 $layer.css(pos)
 47                 $.each(box_style, function (i, name) {
 48                     $layer.css(name, $input.css(name))
 49                 })
 50             }
 51
 52             var layer_style = {
 53                 color     : ‘gray‘,
 54                 cursor    : ‘text‘,
 55                 textAlign : ‘left‘,
 56                 position  : ‘absolute‘,
 57                 fontSize  : $input.css(‘fontSize‘),
 58                 fontFamily: $input.css(‘fontFamily‘),
 59                 display   : is_empty() ? ‘block‘ : ‘none‘
 60             }
 61
 62
 63             var layer_props = {
 64                 text  : opt.text,
 65                 width : width,
 66                 height: ‘auto‘
 67             }
 68
 69
 70             var ns = ‘.‘ + opt.namespace, $layer = $input.data(‘layer‘ + ns)
 71             if (!$layer) {
 72                 $input.data(‘layer‘ + ns, $layer = $(‘<div>‘, layer_props).appendTo($input.offsetParent()) )
 73             }
 74
 75
 76             $layer
 77                 .css($.extend(layer_style, opt.style))
 78                 .unbind(‘click‘ + ns)
 79                 .bind(‘click‘ + ns, function () {
 80                     opt.hideOnFocus && hide()
 81                     $input.focus()
 82                 })
 83
 84             $input
 85                 .unbind(ns)
 86                 .bind(‘blur‘ + ns, check)
 87
 88             if (opt.hideOnFocus) {
 89                 $input.bind(‘focus‘ + ns, hide)
 90             }else{
 91                 $input.bind(‘keypress keydown‘ + ns, function(e) {
 92                     var key = e.keyCode
 93                     if (e.charCode || (key >= 65 && key <=90)) {
 94                         hide()
 95                     }
 96                 })
 97                     .bind(‘keyup‘ + ns,check)
 98             }
 99
100            101
102             $input.get(0).onpropertychange = check
103
104             position()
105             check()
106         })
107     }
108
109 })(jQuery)

　　有时候，并不需要把所有的都弄的一清二楚，不可能也没必要。更应该把精力放在对自己来说更合适更有意义更有价值的地方