淘宝搜索框效果实现分析


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 相关文章推荐
浅析jQuery1.8的几个小变化
Dec 10 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
Javascript获取某个月的天数
May 30 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
javascript引用对象的方法代码
2007/08/13 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
详解vue 组件
2020/06/11 Javascript
详解vue路由
2020/08/05 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Python 元组操作总结
2019/09/18 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
Jar包的作用是什么
2014/03/30 面试题
医学生自荐信
2013/12/03 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
安全资金保障制度
2014/01/23 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
运动会拉拉队口号
2014/06/09 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL