HTML5----placeholder属性

placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。

<input type="text" name="first_name" class="first_name" placeholder="输入姓名/手机号"/>

<style type="text/css">
.first_name{ height:24px; line-height:24px; border:1px solid #e2e2e6; color:#666; padding:2px 10px;}

.first_name::-webkit-input-placeholder { color:#e2e2e6; }
.first_name::-moz-placeholder { color:#e2e2e6; } /* firefox 19+ */
.first_name:-ms-input-placeholder { color:#e2e2e6; } /* ie */
.first_name:-moz-placeholder { color:#e2e2e6; }
</style>

如果用户的浏览器不支持 placeholder 特征，你需要借助MooTools, Dojo, 或其它JavaScript工具来实现它

<script type="text/javascript">
/*测试浏览器是否支持此属性,给出提示   如：IE6,8肯定是不支持的*/
function hasPlaceholderSupport() {
	var input = document.createElement('input');
	return ('placeholder' in input);
}

/* mootools ftw! */
var firstNameBox = $('first_name'),
	message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
	focus: function() {
		if(firstNameBox.value == message) { searchBox.value = ''; }
	},
	blur: function() {
		if(firstNameBox.value == '') { searchBox.value = message; }
	}
});
</script>