在输入框里面预设一段提示文字,当焦点在输入框的时候清空这段文字,这在目前来说已经不是什么新鲜事了。淘宝的搜索框就用到了这样一种设计:
淘宝的输入框采取的做法,它不把这段提示文字作为输入框的value值,而是放在另一个标签内,再用绝对定位把这段文字叠到输入框上:
<span class="className">
<label for="q">请输入您要查询的内容</label>
<input id="q" type="text" autocomplete="off" title="搜索宝贝儿" name="q"/>
</span>
从上面的代码可以看到,提示文字在label标签内,这样做有两个好处:
- 良好的结构性。既不是div不是span,对input的说明就应该用label。
- 良好的用户体验。由于设置了for属性,当用户点击label的时候,就会自动focus到输入框。
javascript要控制的其实就是label的显示和隐藏,再也不需要管那段提示文字的内容了:
$("#q").onfocus = function() {
$("label[for=q]")[0].style.display = 'none';
};
$("#q").onblur = function() {
if ("" == this.value) {
$("label[for=q]")[0].style.display = '';
}
};
"label做的搜索提示应当默认是不显示的,然后通过javascript决定其是否显示"