html5 placeholder ie 不兼容问题 解决方案

解决HTML5 placeholder的方案

来源：   时间：2013-09-05 20:06:49   阅读数：11375

分享到： 0

[导读] 使低版本浏览器支持Placeholder有很多方法，都不是很完美，或多或少有点问题，且有些原生支持的浏览器在获得焦点时会清空Placeholder提示。发现知乎网的解决方法不错，特记录下windows系统中以下浏览器测试通过

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

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

jquery.placeholder.zhihu.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>     <html lang="en">     <head>     <meta charset="utf-8">     <!--[if lt IE 9]>     <script src="js/html5shiv.js"></script>     <![endif]-->     <title>HTML5 placeholder jQuery Plugin</title>     <style>          body, input, textarea { font: 1em/1.4 Helvetica, Arial; }          label code { cursor: pointer; float: left; 150px; }          input { 14em; }          textarea { height: 5em; 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="Search this site…" autofocus></label></p>          <p><label><code>type=text</code> <input type="text" name="name" placeholder="e.g. John Doe"></label></p>          <p><label><code>type=email</code> <input type="email" name="email" placeholder="e.g. address@example.ext"></label></p>          <p><label><code>type=url</code> <input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/"></label></p>          <p><label><code>type=tel</code> <input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88"></label></p>          <p><label for="p"><code>type=password</code> </label><input type="password" name="password" placeholder="e.g. hunter2" id="p"></p>          <p><label><code>textarea</code> <textarea name="message" placeholder="Your message goes here"></textarea></label></p>          <p><input type="submit" value="type=submit"></p>          </form>          <script src="js/jquery-1.7.2.min.js"></script>              <script src="js/jquery.placeholder.zhihu.js"></script>          <script>               $(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>