这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在输入框里面预设一段提示文字,当焦点在输入框的时候清空这段文字,这在目前来说已经不是什么新鲜事了。
淘宝的搜索框就用到了这样一种设计:
这种设计一般是用 javascript 监控了输入框的 focus 和 blur 事件:
- <input type="text" id="q" value="请输入关键字" />
- <script type="text/javascript">
- //<![CDATA[
- $("#q").onfocus = function() {
- if ("请输入关键字" == this.value) {this.value = "";
- }
- };
- $("#q").onblur = function() {
- if ("" == this.value) {this.value = "请输入关键字";
- }
- };
- //]]>
- </script>
这段代码有两个很明显的缺点:
淘宝的输入框则采取了另一种做法,它不把这段提示文字作为输入框的 value 值,而是放在另一个标签内,再用绝对定位把这段文字叠到输入框上:
从上面的代码可以看到,提示文字在 label 标签内,这样做有两个好处:
javascript 要控制的其实就是 label 的显示和隐藏,再也不需要管那段提示文字的内容了:
- $("#q").onfocus = function() {$("label[for=q]")[0].style.display = 'none';
- };
- $("#q").onblur = function() {
- if ("" == this.value) {$("label[for=q]")[0].style.display = '';
- }
- };
javascript 是简洁了,但用户体验呢?在 javascript 执行前,那段提示文字也是无论如何都不会消失,用户也是想删掉这段文字,但是他们删不了,因为这些文字实际上并不在输入框内,而他们输入的内容会被提示文字挡住了。我个人认为这给用户带来了很大的疑惑。
来源: http://www.phperz.com/article/17/0718/283368.html