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

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

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

 <script src="jquery-1.11.3.js"></script>
 <!--IE8-IE6支持html5 placeholder新属性 引入脚本及相应功能代码-->
 <script src="placeholder.js"></script>
 <script>
 //    使IE8-IE6支持html5 placeholder新属性
     $(function(){
         var support = (function(input) {
             return function(attr) { return attr in input }
         })(document.createElement('input'))
         if ( !(support('placeholder') && $.browser.webkit) ) {
             $('input[placeholder],textarea[placeholder]').placeholder({
                 useNative: false,
                 hideOnFocus: false,
                 style: {
                     textShadow: 'none'
                 }
             });
         }

         if ( !support('autofocus') ) {
             $('input[autofocus]').focus()
         }
     });

其中placeholder.js的源码如下：

 (function ($) {
     var attr = 'placeholder', nativeSupported = attr in document.createElement('input')

     $.fn.placeholder = function (options) {
         return this.each(function () {
             var $input = $(this)

             if ( typeof options === 'string' ) {
                 options = { text: options }
             }

             var opt = $.extend({
                 text     : '',
                 style    : {},
                 namespace: 'placeholder',
                 useNative: true,
                 hideOnFocus: true
             }, options || {})

             if ( !opt.text ) {
                 opt.text = $input.attr(attr)
             }

             if (!opt.useNative) {
                 $input.removeAttr(attr)
             }else if ( nativeSupported ) {

                 $input.attr(attr, opt.text)
                 return
             }

             var width     = $input.width(), height = $input.height()
             var box_style = ['marginTop', 'marginLeft', 'paddingTop', 'paddingLeft', 'paddingRight']

             var show      = function () { $layer.show() }
             var hide      = function () { $layer.hide() }
             var is_empty  = function () { return !$input.val() }
             var check     = function () { is_empty() ? show() : hide() }

             var position  = function () {
                 var pos = $input.position()
                 if (!opt.hideOnFocus) {

                     pos.left +=
                 }
                 $layer.css(pos)
                 $.each(box_style, function (i, name) {
                     $layer.css(name, $input.css(name))
                 })
             }

             var layer_style = {
                 color     : 'gray',
                 cursor    : 'text',
                 textAlign : 'left',
                 position  : 'absolute',
                 fontSize  : $input.css('fontSize'),
                 fontFamily: $input.css('fontFamily'),
                 display   : is_empty() ? 'block' : 'none'
             }

             var layer_props = {
                 text  : opt.text,
                 width : width,
                 height: 'auto'
             }

             var ns = '.' + opt.namespace, $layer = $input.data('layer' + ns)
             if (!$layer) {
                 $input.data('layer' + ns, $layer = $('<div>', layer_props).appendTo($input.offsetParent()) )
             }

             $layer
                 .css($.extend(layer_style, opt.style))
                 .unbind('click' + ns)
                 .bind('click' + ns, function () {
                     opt.hideOnFocus && hide()
                     $input.focus()
                 })

             $input
                 .unbind(ns)
                 .bind('blur' + ns, check)

             if (opt.hideOnFocus) {
                 $input.bind('focus' + ns, hide)
             }else{
                 $input.bind('keypress keydown' + ns, function(e) {
                     var key = e.keyCode
                     if (e.charCode || (key >=  && key <=)) {
                         hide()
                     }
                 })
                     .bind('keyup' + ns,check)
             }

             $input.get().onpropertychange = check

             position()
             check()
         })
     }

 })(jQuery)

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