利用JQuery解决IE9不支持placeholder属性

web前端



HTMl5增加了很多的属性，但是有些属性不兼容旧版本的浏览器，尤其是IE的。

现在就利用JQuery的方法来解决IE9及之前的版本不支持input的placeholder属性的问题。

demo

首先需要用到JQuery的focus和blur事件：

focus: 在元素获取焦点时触发，如点击文本框时，触发该事件；

blur: 在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件


Html

1
2
3
4
5
6
7
8
9
10
<div>
    <div>
        <!--HTML5 input的属性-->
        <input placeholder="请输入..."/>
    </div>
    <div>
        <!--IE9 解决方法-->
        <input value="" id="1" type="text"/>
    </div>
</div>


Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(window).ready(function() {
    $("#1").val("请输入...");
    $("#1").addClass("fontColor");
    $("#1").bind("focus",function() {
        if($("#1").val() == "请输入...") {
            $("#1").val("");
            $("#1").removeClass("fontColor");
        };
    });
    $("#1").bind("blur",function() {
        if($("#1").val() == "") {
            $("#1").val("请输入...");
            $("#1").addClass("fontColor");
        };
    });
});


Css

1
2
3
.fontColor {
	color: grey;
}