淘宝搜索框研默认文字

在输入框里面预设一段提示文字，当焦点在输入框的时候清空这段文字，这在目前来说已经不是什么新鲜事了。淘宝的搜索框就用到了这样一种设计：

 

 

淘宝的输入框采取的做法，它不把这段提示文字作为输入框的value值，而是放在另一个标签内，再用绝对定位把这段文字叠到输入框上：

<span class="className">
<label for="q">请输入您要查询的内容</label>
<input id="q" type="text" autocomplete="off" title="搜索宝贝儿" name="q"/>
</span>

 

从上面的代码可以看到，提示文字在label标签内，这样做有两个好处：

1. 良好的结构性。既不是div不是span，对input的说明就应该用label。
2. 良好的用户体验。由于设置了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决定其是否显示"