Inline Form Labels（2）
八月 10, 2010
by 小寒 3 comments
很多网站在填写表单的时候，都可以看到这样一种UI，input[type=text]里面有提示的文字，当鼠标点进去之后提示文字就消失了。关于这种UI，之前有写过文章介绍过http://www.zhoumingzhi.com/?p=182。在本文中主要是介绍以HTML 5的实现方式以及兼容方案。
一，HTML 5的实现方式
HTML 5的input元素引入了placeholder的属性，就是为了实现本文开头所说的效果，代码也很简单。
<input type="text" placeholder="请输入一些文字" />
二，对不支持HTML 5浏览器的兼容方案
对于不支持HTML 5的浏览器，上面的方法就不可行了。但是placeholder这个属性可以利用起来，结合JS实现想达到的效果。下面结合代码说明实现方法：
首先要用JS检测一下浏览器支不支持placeholder这个属性。
(function() {
var tmp = document.createElement("input");
window.supports = {
// 检测input是否支持placeholder特性
placeholder: "placeholder" in tmp
}
})();
如果支持的话就什么也不做，浏览器会帮你实现这个效果。
如果不支持则要写段JS。为了方便说明用到了jQuery，代码如下：
// 绑定input的placeholder
function bindPlaceholder(input) {
if(!window.supports.placeholder) {
var jqInput = $(input),
placeholder = jqInput.attr("placeholder");
if(placeholder) {
if(input.value == "") {
input.value = placeholder;
$(input).addClass("placeholder");
}
jqInput.focus(function() {
if(this.value == placeholder) {
$(this).removeClass("placeholder");
this.value = "";
}
}).blur(function() {
if(this.value == "") {
$(this).addClass("placeholder");
this.value = placeholder;
}
});
}
}
}
上述代码中有个叫placeholder的CSS类，这个主要是让占位符的字体颜色变灰。CSS如下：
.placeholder {
color: #a9a9a9;
}
实现上面的函数之后，就可以在页面初始化的时候调用了。
$("input[placeholder]").each(function() {
bindPlaceholder(this);
});
三，结论
HTML 5中有很多很方便的特性，但是目前不是所有浏览器都支持，所以在用HTML 5的时候要考虑到兼容方案。
