（转）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>