（二）给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 += 2
                }
                $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 >= 65 && key <=90)) {
                        hide()
                    }
                })
                    .bind('keyup' + ns,check)
            }

           101             
            $input.get(0).onpropertychange = check

            position()
            check()
        })
    }

})(jQuery)

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