文章目录

placeholder属性的出现使input输入框不再单调,而且可以对用户做一个对输入内容的提醒或者指引,起到了很好的作用。但是 但是IE9及IE9以下不支持这个属性,这就让人很恼火呀,毕竟中国还有好多人用的是IE9及以下浏览器/(ㄒoㄒ)/~~。

现在网上流行的两种解决方式是:

  1. 使用value来代替
  2. 添加标签
  3. 引用现成插件 jquery.placeholder.min.js(下载链接:http://download.csdn.net/download/fxss5201/9942270,当然也可以直接去github上自己搜索下载)

我这里使用的是第二中解决方式,当然了第三种现成插件很成熟,但是感觉任何一个小问题如果都靠插件来解决会造成加载的js相当多,而且自己多思考多尝试也是挺好的。

之所以不用第一种方式,是因为一般表单最后提交的时候我们都需要进行非空判断,这时候value就会影响判断,分不清到底是提示语还是填写的输入内容。第二种方式就不会造成这样的影响。

首先,肯定要保证不影响现代浏览器(支持placeholder属性的浏览器),这个时候我们就需要对其进行判断是否支持placeholder属性:

1
2
3
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}

上述这段代码可进行判断浏览器是否兼容placeholder属性,只有在不支持的时候才需要进行相应的处理。

然后就需要在其父元素的html中append一个标签来用作显示placeholder,这样就需要父元素必须采用定位布局,假如父元素为:position: relative;,用作显示placeholder的标签采用position:absolute;布局。

但是这还不够,因为我们一般会对input做一些处理,例如高度,这样的话要让placeholder的标签垂直居中则必须设置line-height,当然一般还会设置input的padding-left,placeholder的标签刚好是定位布局,则可以用left表示了。

下面是一整个例子(由于是基于jquery-1.11.3.js的,所以在查看的时候请自行引入该js,并保证命名一致):

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单实现IE9及以下对placeholder的兼容性</title>
<style>
* {margin: 0;padding: 0;font-family: "Microsoft YaHei";font-size: 14px;}
.input-box {margin: 10px;position: relative;width: 100px;height: 30px;line-height: 30px;}
.input1 {width: 100%;height: 100%;padding-left: 5px;}
.input2 {width: 100%;height: 100%;padding-left: 10px;}
.placeholder {position: absolute;top: 0;z-index: 10;color: #888;}
</style>
</head>
<body>
<div class="input-box">
<input class="input1" type="text" placeholder="请输入标题">
</div>
<div class="input-box">
<input class="input2" type="text" placeholder="请输入文章">
</div>
<script src="jquery-1.11.3.js"></script>
<script>
$(function(){
// 兼容IE9下的placeholder
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder
$("[placeholder]").each(function(){
var _this = $(this);
var left = _this.css("padding-left");
_this.parent().append('<span class="placeholder" data-type="placeholder" style="left: ' + left + '">' + _this.attr("placeholder") + '</span>');
if(_this.val() != ""){
_this.parent().find("span.placeholder").hide();
}
else{
_this.parent().find("span.placeholder").show();
}
}).on("focus", function(){
$(this).parent().find("span.placeholder").hide();
}).on("blur", function(){
var _this = $(this);
if(_this.val() != ""){
_this.parent().find("span.placeholder").hide();
}
else{
_this.parent().find("span.placeholder").show();
}
});
// 点击表示placeholder的标签相当于触发input
$("span.placeholder").on("click", function(){
$(this).hide();
$(this).siblings("[placeholder]").trigger("click");
$(this).siblings("[placeholder]").trigger("focus");
});
}
})
</script>
</body>
</html>
文章目录