PlaceHolder的两种实现方式 - 王朝网络宽屏版

PlaceHolder的两种实现方式 placeholder属性是HTML5中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示。

如

目前浏览器的支持情况

浏览器

IE6/7/8/9

IE10+

Firefox

Chrome

Safari

是否支持

YES

然而，虽然IE10+支持placeholder属性，它的表现与其它浏览器也不一致

IE10+里鼠标点击时（获取焦点）placeholder文本消失Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失

这相当恶心，如果使用了placeholder属性。产品经理还是不依不饶，会讲为什么IE里是点击的时候提示文本消失，Chrome里却是键盘输入的时候提示文本消失。要求前端工程师改成一样的表现形式。鉴于此，以下两种实现方式均不采用原生的placeholder属性。

两种方式的思路

(方式一)使用input的value作为显示文本(方式二)不使用value，添加一个额外的标签（span）到body里然后绝对定位覆盖到input上面两种方式各有优缺点，方式一占用了input的value属性，表单提交时需要额外做一些判断工作，方式二则使用了额外的标签。

方式一/** * PlaceHolder组件 * $(input).placeholder({ * Word: // @string 提示文本 * color: // @string 文本颜色 * evtType: // @string focus|keydown 触发placeholder的事件类型 * }) * * NOTE： * evtType默认是focus，即鼠标点击到输入域时默认文本消失，keydown则模拟HTML5 placeholder属性在Firefox/Chrome里的特征，光标定位到输入域后键盘输入时默认文本才消失。 * 此外，对于HTML5 placeholder属性，IE10+和Firefox/Chrome/Safari的表现形式也不一致，因此内部实现不采用原生placeholder属性 */$.fn.placeholder = function(option, callback) {var settings = $.extend({word: '',color: '#ccc',evtType: 'focus'}, option)function bootstrap($that) {// some alias var word = settings.wordvar color = settings.colorvar evtType = settings.evtType// defaultvar defColor = $that.CSS('color')var defVal = $that.val()if (defVal == '' || defVal == word) {$that.css({color: color}).val(word)} else {$that.css({color: defColor})}function switchStatus(isDef) {if (isDef) {$that.val('').css({color: defColor})} else {$that.val(word).css({color: color})}}function asFocus() {$that.bind(evtType, function() {var txt = $that.val()if (txt == word) {switchStatus(true)}}).bind('blur', function() {var txt = $that.val()if (txt == '') {switchStatus(false)}})}function asKeydown() { $that.bind('focus', function() { var elem = $that[0] var val = $that.val() if (val == word) { setTimeout(function() { // 光标定位到首位 $that.setCursorPosition({index: 0}) }, 10) } })}if (evtType == 'focus') {asFocus()} else if (evtType == 'keydown') {asKeydown()} // keydown事件里处理placeholder $that.keydown(function() { var val = $that.val() if (val == word) { switchStatus(true) } }).keyup(function() { var val = $that.val() if (val == '') { switchStatus(false) $that.setCursorPosition({index: 0}) } })}return this.each(function() {var $elem = $(this)bootstrap($elem)if ($.isFunction(callback)) callback($elem)})}

线上示例：http://snandy.github.io/lib/ui/demo/placeholder/b.html

会用到 setCursorPosition。

方式二$.fn.placeholder = function(option, callback) {var settings = $.extend({word: '',color: '#999',evtType: 'focus',zIndex: 20,diffPaddingLeft: 3}, option)function bootstrap($that) {// some alias var word = settings.wordvar color = settings.colorvar evtType = settings.evtTypevar zIndex = settings.zIndexvar diffPaddingLeft = settings.diffPaddingLeft// default cssvar width = $that.outerWidth()var height = $that.outerHeight()var fontSize = $that.css('font-size')var fontFamily = $that.css('font-family')var paddingLeft = $that.css('padding-left')// PRocesspaddingLeft = parseInt(paddingLeft, 10) + diffPaddingLeft// redner var $placeholder = $('<span class="placeholder">')$placeholder.css({position: 'absolute',zIndex: '20',color: color,width: (width - paddingLeft) + 'px',height: height + 'px',fontSize: fontSize,paddingLeft: paddingLeft + 'px',fontFamily: fontFamily}).text(word).hide()// 位置调整 move()// textarea 不加line-heihgt属性if ($that.is('input')) {$placeholder.css({lineHeight: height + 'px'})}$placeholder.appendTo(document.body)// 内容为空时才显示，比如刷新页面输入域已经填入了内容时var val = $that.val()if ( val == '' && $that.is(':visible') ) {$placeholder.show()} function hideAndFocus() { $placeholder.hide() $that[0].focus() } function move() { var offset = $that.offset() var top = offset.top var left = offset.left $placeholder.css({ top: top, left: left }) }function asFocus() {$placeholder.click(function() {hideAndFocus()// 盖住后无法触发input的click事件，需要模拟点击下 setTimeout(function(){ $that.click() }, 100)}) // IE有些bug，原本不用加此句 $that.click(hideAndFocus)$that.blur(function() {var txt = $that.val()if (txt == '') {$placeholder.show()}})}function asKeydown() {$placeholder.click(function() {$that[0].focus()})}if (evtType == 'focus') {asFocus()} else if (evtType == 'keydown') {asKeydown()}$that.keyup(function() {var txt = $that.val()if (txt == '') {$placeholder.show()} else {$placeholder.hide()}}) // 窗口缩放时处理 $(window).resize(function() { move() }) // cache $that.data('el', $placeholder) $that.data('move', move)}return this.each(function() {var $elem = $(this)bootstrap($elem)if ($.isFunction(callback)) callback($elem)})}

线上示例：http://snandy.github.io/lib/ui/demo/placeholder/a.html

方式2 对于以下场景不适合

1. input初始隐藏

此时无法取到input的offset，继而无法定位span到input上面。

2. 包含input的页面dom结构发生变化

比如页面里删除了一些元素或添加了一些元素，导致input向上或向下偏移，而此时span则没有偏移（span相对body定位）。这比较恶心，可以考虑把span作为input的兄弟元素，即相对内层div定位（而不是body）。但这样必须强制给外层div添加position:relative，添加后可能会对页面布局产生一定影响。