淘宝搜索框效果实现分析


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 相关文章推荐
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
再论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
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
popdiv
2006/07/14 Javascript
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
用js实现放大镜效果
2020/10/28 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Django实现文件上传和下载功能
2019/10/06 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
sort命令的作用和用法
2013/08/25 面试题
关于毕业的广播稿
2014/01/10 职场文书
安全标准化汇报材料
2014/02/03 职场文书
无保留意见审计报告
2015/06/05 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
争做文明公民倡议书
2019/06/24 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
CSS极坐标的实例代码
2021/06/03 HTML / CSS