解决HTML5 Placeholder兼容性的方案

来源：互联网发布：印度英语知乎编辑：程序博客网时间：2024/06/14 11:01

使浏览器支持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)

Demo:

<!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; 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="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>

转载自： http://xyly624.blog.51cto.com/842520/864959

0 0