目前浏览器的支持情况
| 浏览器 | 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，添加后可能会对页面布局产生一定影响。
扫一扫
2626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
