（二）给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)

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

巴特西

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

最新文章

热门文章