（转）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部分：
1 /* 2 * html5 placeholder pollfill 3 * - 使用绝对定位内嵌层 4 * - 也适用于密码域 5 * 目标浏览器: IE 6~9, FF 3.5 6 ``` 7 // 默认 8 $('input[placeholder]').placeholder() 9 10 // autofocus 与 placeholder 搭配时，非 webkit 清空了提示文本，推荐 11 $('input[placeholder]').placeholder({ 12 // 将删除原有 placehodler 属性，强制用 JS 实现替代 13 useNative: false, 14 // focus 时不清除提示文本， keypress 有效字符时才清空 15 hideOnFocus: false, 16 // 附加样式 17 style: { 18 textShadow: 'none' 19 } 20 }) 21 ``` 22 */ 23 (function ($) { 24 var attr = 'placeholder', nativeSupported = attr in document.createElement('input') 25 26 $.fn.placeholder = function (options) { 27 return this.each(function () { 28 var $input = $(this) 29 30 if ( typeof options === 'string' ) { 31 options = { text: options } 32 } 33 34 var opt = $.extend({ 35 text : '', 36 style : {}, 37 namespace: 'placeholder', 38 useNative: true, 39 hideOnFocus: true 40 }, options || {}) 41 42 if ( !opt.text ) { 43 opt.text = $input.attr(attr) 44 } 45 46 if (!opt.useNative) { 47 $input.removeAttr(attr) 48 }else if ( nativeSupported ) { 49 // 仅改变文本 50 $input.attr(attr, opt.text) 51 return 52 } 53 54 var width = $input.width(), height = $input.height() 55 var box_style = ['marginTop', 'marginLeft', 'paddingTop', 'paddingLeft', 'paddingRight'] 56 57 var show = function () { $layer.show() } 58 var hide = function () { $layer.hide() } 59 var is_empty = function () { return !$input.val() } 60 var check = function () { is_empty() ? show() : hide() } 61 62 var position = function () { 63 var pos = $input.position() 64 if (!opt.hideOnFocus) { 65 // 按??藏的情况，需要移?庸?肆较袼 66 pos.left += 2 67 } 68 $layer.css(pos) 69 $.each(box_style, function (i, name) { 70 $layer.css(name, $input.css(name)) 71 }) 72 } 73 74 var layer_style = { 75 color : 'gray', 76 cursor : 'text', 77 textAlign : 'left', 78 position : 'absolute', 79 fontSize : $input.css('fontSize'), 80 fontFamily: $input.css('fontFamily'), 81 display : is_empty() ? 'block' : 'none' 82 } 83 84 // create 85 var layer_props = { 86 text : opt.text, 87 width : width, 88 height: 'auto' 89 } 90 91 // 确保只绑定一次 92 var ns = '.' + opt.namespace, $layer = $input.data('layer' + ns) 93 if (!$layer) { 94 $input.data('layer' + ns, $layer = $('<div>', layer_props).appendTo($input.offsetParent()) ) 95 } 96 97 // activate 98 $layer 99 .css($.extend(layer_style, opt.style)) 100 .unbind('click' + ns) 101 .bind('click' + ns, function () { 102 opt.hideOnFocus && hide() 103 $input.focus() 104 }) 105 106 $input 107 .unbind(ns) 108 .bind('blur' + ns, check) 109 110 if (opt.hideOnFocus) { 111 $input.bind('focus' + ns, hide) 112 }else{ 113 $input.bind('keypress keydown' + ns, function(e) { 114 var key = e.keyCode 115 if (e.charCode || (key >= 65 && key <=90)) { 116 hide() 117 } 118 }) 119 .bind('keyup' + ns,check) 120 } 121 122 // 由于 ie 记住密码的特性，需要监听值改变 123 // ie9 不支持 jq bind 此事件 124 $input.get(0).onpropertychange = check 125 126 position() 127 check() 128 }) 129 } 130 131 })(jQuery)
html部分：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <!--[if lt IE 9]> 5 <script src="js/html5shiv.js"></script> 6 <![endif]--> 7 <title>HTML5 placeholder jQuery Plugin</title> 8 <style type="text/css"> 9 body, input, textarea { 10 font: 1em/1.4 Helvetica, Arial; 11 } 12 label code { 13 cursor: pointer; 14 float: left; 15 width: 150px; 16 } 17 input { 18 width: 14em; 19 } 20 textarea { 21 height: 5em; 22 width: 20em; 23 } 24 .placeholder { 25 color: #aaa; 26 } 27 .note { 28 border: 1px solid orange; 29 padding: 1em; 30 background: #ffffe0; 31 } 32 </style> 33 </head> 34 <body> 35 <h1> 36 HTML5 Placeholder jQuery Plugin</h1> 37 <form id="test"> 38 <p> 39 <label> 40 <code>type=search</code> 41 <input type="search" name="search" placeholder="搜索网站…" autofocus></label></p> 42 <p> 43 <label> 44 <code>type=text</code> 45 <input type="text" name="name" placeholder="输入文本"></label></p> 46 <p> 47 <label> 48 <code>type=email</code> 49 <input type="email" name="email" placeholder="输入邮箱"></label></p> 50 <p> 51 <label> 52 <code>type=url</code> 53 <input type="url" name="url" placeholder="输入网址"></label></p> 54 <p> 55 <label> 56 <code>type=tel</code> 57 <input type="tel" name="tel" placeholder="输入电话号码"></label></p> 58 <p> 59 <label for="p"> 60 <code>type=password</code> 61 </label> 62 <input type="password" name="password" placeholder="输入密码" id="p"></p> 63 <p> 64 <label> 65 <code>textarea</code> 66 <textarea name="message" placeholder="文本内容写这里"></textarea></label></p> 67 <p> 68 <input type="submit" value="提交"></p> 69 </form> 70 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 71 <script src="jquery.placeholder.js" type="text/javascript"></script> 72 <script type="text/javascript"> 73 $(function () { 74 var support = (function (input) { 75 return function (attr) { return attr in input } 76 })(document.createElement('input')) 77 if (!(support('placeholder') && $.browser.webkit)) { 78 $('input[placeholder],textarea[placeholder]').placeholder({ 79 useNative: false, 80 hideOnFocus: false, 81 style: { 82 textShadow: 'none' 83 } 84 }); 85 } 86 87 if (!support('autofocus')) { 88 $('input[autofocus]').focus() 89 } 90 }); 91 </script> 92 </body> 93 </html>
