Inline Form Labels(2)

很多网站在填写表单的时候,都可以看到这样一种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的时候要考虑到兼容方案。

Inline Form Labels(2)》上有3条评论

  1. Pingback引用通告: » Inline Form Labels » UED TEAM

  2. 小寒 文章作者

    随着浏览器对HTML 5的支持越来越好,以后这段脚本就可以去掉,让浏览器利用placeholder属性实现这样的效果。我主要是这个意思,呵呵。

发表评论