PlaceHolder的两种实现方式
Posted Tammiel
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PlaceHolder的两种实现方式相关的知识，希望对你有一定的参考价值。
placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示。
如
|
1
|
<input type="text" name="loginName" placeholder="邮箱/手机号/QQ号"> |
目前浏览器的支持情况
| 浏览器 | IE6/7/8/9 | IE10+ | Firefox | Chrome | Safari |
| 是否支持 | NO | YES | YES | YES | YES |
然而，虽然IE10+支持placeholder属性，它的表现与其它浏览器也不一致
- IE10+里鼠标点击时（获取焦点）placeholder文本消失
- Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失
这相当恶心，如果使用了placeholder属性。产品经理还是不依不饶，会讲为什么IE里是点击的时候提示文本消失，Chrome里却是键盘输入的时候提示文本消失。要求前端工程师改成一样的表现形式。鉴于此，以下两种实现方式均不采用原生的placeholder属性。
两种方式的思路
- (方式一)使用input的value作为显示文本
- (方式二)不使用value，添加一个额外的标签（span）到body里然后绝对定位覆盖到input上面
两种方式各有优缺点，方式一占用了input的value属性，表单提交时需要额外做一些判断工作，方式二则使用了额外的标签。
方式一
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
/** * 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.word var color = settings.color var evtType = settings.evtType // default var 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。
方式二
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
$.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.word var color = settings.color var evtType = settings.evtType var zIndex = settings.zIndex var diffPaddingLeft = settings.diffPaddingLeft // default css var 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\') // process paddingLeft = 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，添加后可能会对页面布局产生一定影响。
相关：
http://www.w3.org/TR/2009/WD-html5-20090825/forms.html#the-placeholder-attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder
以上是关于PlaceHolder的两种实现方式的主要内容，如果未能解决你的问题，请参考以下文章