淘宝搜索框效果实现分析


Posted in Javascript onMarch 05, 2011

淘宝的搜索框就用到了这样一种设计:
淘宝搜索框效果实现分析
这种设计一般是用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>

这段代码有两个很明显的缺点:

  1. “请输入关键字”这段提示共出现了3次,一旦要改这段文字就得改3个地方,维护显得非常不便
  2. 为了性能优化,我们会把javascript部分放到页面末尾。然而,像门户网站首页这种代码量很大的页面,末尾的javascript很可能会延时1-2秒执行。在这段时间内,即使焦点在输入框内,提示文字也不会消失,用户需要手动删除这段文字再输入内容

淘宝的输入框则采取了另一种做法,它不把这段提示文字作为输入框的value值,而是放在另一个标签内,再用绝对定位把这段文字叠到输入框上:
淘宝搜索框效果实现分析
从上面的代码可以看到,提示文字在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 = ''; 

} 
};

javascript是简洁了,但用户体验呢?在javascript执行前,那段提示文字也是无论如何都不会消失,用户也是想删掉这段文字,但是他们删不了,因为这些文字实际上并不在输入框内,而他们输入的内容会被提示文字挡住了。我个人认为这给用户带来了很大的疑惑。
淘宝搜索框效果实现分析
Javascript 相关文章推荐
js 页面输出值
Nov 30 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 Javascript
再论Javascript下字符串连接的性能
Mar 05 #Javascript
再论Javascript的类继承
Mar 05 #Javascript
Array的push与unshift方法性能比较分析
Mar 05 #Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 #Javascript
判断用户是否在线的代码
Mar 05 #Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 #Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 #Javascript
You might like
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
javascript eval函数深入认识
2009/02/21 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
实现vuex原理的示例
2020/10/21 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
python实现剪切功能
2019/01/23 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
活动策划邀请函
2014/02/06 职场文书
教师节促销方案
2014/03/22 职场文书
投标服务承诺书
2014/05/28 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书