淘宝搜索框效果实现分析


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 相关文章推荐
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
js CSS操作方法集合
Oct 31 Javascript
jquery 上下滚动广告
Jun 17 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 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中的foreach问题
2013/06/30 PHP
php实现删除空目录的方法
2015/03/16 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
php实现图片压缩处理
2020/09/09 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
webpack搭建vue 项目的步骤
2017/12/27 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
django项目搭建与Session使用详解
2018/10/10 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
如何利用python进行时间序列分析
2020/08/04 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
优秀教师获奖感言
2014/01/31 职场文书
售房协议书范本2014
2014/10/23 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
python实现双链表
2022/05/25 Python