（转）html5 Placeholder属性兼容IE6、7方法

使低版本浏览器支持Placeholder有很多方法，都不是很完美，或多或少有点问题，且有些原生支持的浏览器在获得焦点时会清空Placeholder提示。发现zhihu的解决方法不错，特记录下

windows系统中以下浏览器测试通过:Google Chrome 18,Firefox 12,IE 9,IE 6,Opera 11.5。在android 4.0系统也测试了下，原生浏览器及Opera Mobile12基本通过，缺陷是获得焦点时会清空Placeholder提示。

jquery.placeholder.js部分：

 /*

     * html5 placeholder pollfill

     * - 使用绝对定位内嵌层

     * - 也适用于密码域

     * 目标浏览器: IE 6~9, FF 3.5

     ```

     // 默认

     $('input[placeholder]').placeholder() 

     // autofocus 与 placeholder 搭配时，非 webkit 清空了提示文本，推荐

     $('input[placeholder]').placeholder({

       // 将删除原有 placehodler 属性，强制用 JS 实现替代

       useNative: false,

       // focus 时不清除提示文本， keypress 有效字符时才清空

       hideOnFocus: false,

       // 附加样式

       style: {

         textShadow: 'none'

       }

     })

     ```

     */

     (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'

           } 

           // create

           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()) )

           } 

           // activate

           $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)

           } 

           // 由于 ie 记住密码的特性，需要监听值改变

           // ie9 不支持 jq bind 此事件

           $input.get(0).onpropertychange = check 

           position()

           check()

         })

       } 

     })(jQuery)

html部分：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <!--[if lt IE 9]>

     <script src="js/html5shiv.js"></script>

     <![endif]-->

     <title>HTML5 placeholder jQuery Plugin</title>

     <style type="text/css">

         body, input, textarea {

             font: 1em/1.4 Helvetica, Arial;

         }

         label code {

             cursor: pointer;

             float: left;

             width: 150px;

         }

         input {

             width: 14em;

         }

         textarea {

             height: 5em;

             width: 20em;

         }

         .placeholder {

             color: #aaa;

         }

         .note {

             border: 1px solid orange;

             padding: 1em;

             background: #ffffe0;

         }

     </style>

 </head>

 <body>

     <h1>

         HTML5 Placeholder jQuery Plugin</h1>

     <form id="test">

     <p>

         <label>

             <code>type=search</code>

             <input type="search" name="search" placeholder="搜索网站…" autofocus></label></p>

     <p>

         <label>

             <code>type=text</code>

             <input type="text" name="name" placeholder="输入文本"></label></p>

     <p>

         <label>

             <code>type=email</code>

             <input type="email" name="email" placeholder="输入邮箱"></label></p>

     <p>

         <label>

             <code>type=url</code>

             <input type="url" name="url" placeholder="输入网址"></label></p>

     <p>

         <label>

             <code>type=tel</code>

             <input type="tel" name="tel" placeholder="输入电话号码"></label></p>

     <p>

         <label for="p">

             <code>type=password</code>

         </label>

         <input type="password" name="password" placeholder="输入密码" id="p"></p>

     <p>

         <label>

             <code>textarea</code>

             <textarea name="message" placeholder="文本内容写这里"></textarea></label></p>

     <p>

         <input type="submit" value="提交"></p>

     </form>

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

     <script src="jquery.placeholder.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(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()

             }

         });

     </script>

 </body>

 </html>

巴特西

（转）html5 Placeholder属性兼容IE6、7方法

最新文章

热门文章