淘宝搜索框研究报告
作者:heero 来源:heero博客 发布时间:2010-07-27 12:49:00
在输入框里面预设一段提示文字,当焦点在输入框的时候清空这段文字,这在目前来说已经不是什么新鲜事了。淘宝的搜索框就用到了这样一种设计:
这种设计一般是用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>
这段代码有两个很明显的缺点:
“请输入关键字”这段提示共出现了3次,一旦要改这段文字就得改3个地方,维护显得非常不便。
为了性能优化,我们会把javascript部分放到页面末尾。然而,像门户网站首页这种代码量很大的页面,末尾的javascript很可能会延时1-2秒执行。在这段时间内,即使焦点在输入框内,提示文字也不会消失,用户需要手动删除这段文字再输入内容。
淘宝的输入框则采取了另一种做法,它不把这段提示文字作为输入框的value值,而是放在另一个标签内,再用绝对定位把这段文字叠到输入框上:
从上面的代码可以看到,提示文字在label标签内,这样做有两个好处:
良好的结构性。既不是div不是span,对input的说明就应该用label。
良好的用户体验。由于设置了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执行前,那段提示文字也是无论如何都不会消失,用户也是想删掉这段文字,但是他们删不了,因为这些文字实际上并不在输入框内,而他们输入的内容会被提示文字挡住了。我个人认为这给用户带来了很大的疑惑。
猜你喜欢
- 客户端程序编写免不了经常接触XMLHttpRequest对象。微软的XHR实现的progid又是一串一串的。 烦人。抽一个中午时间,找了找资
- 现像如下:站点无法打开,或者打开很慢.HTML可以打开.重新启动或者回收应用程序池可恢复.但过一段时间又会出现日志里会有:ISAPI
- CAPTCHA,全称为“Completely Automated Public Turing test to tell Computers
- 类的定义 类定义有三种基本方法,1、创建并能返回特定类型的对象的函数(工厂函数),例如:function Co(){ var o = new
- 许多人利用Session变量来开发ASP(Active Server Pages)。这些变量与任何编程语言中通用的变量非常相似,并且具有和通
- 在我们制作网页的时候会经常碰到一些需求,如果不知道方法,说不定会困扰我们半天。其实实现它们都很简单,下面我们就一起来看看这些常用的网页编辑方
- 但是Class这个东西,如果用得比较少,充其量只是一个大模块的包装方式. 只有大规模地用它来开发,才能显出它对项目管理的优越性来. 所谓的意
- (1)、back_log:要求 MySQL 能有的连接数量。当主要MySQL线程在一个很短时间内得到非常多的连接请求,这就起作用,然后主线程
- 1.字符串函数 长度与分析用 datalength(Char_expr) 返回字符串包含字符数,但不包含后面的空格 substring(ex
- 当浏览者进入你的网站首页时或提交某些表单时,会弹出网站声明或提交说明等文本信息框,引导浏览者使用你的网站。实现这个功能我们是用Dreamwe
- 内容摘要:本文介绍了使用SQL语句修改数据记录的两种方法,一是使用rs.update,二是使用conn.Execute(sql),相信对初学
- 如: 0.625 取 1 2.1 取3 3.6 取4 <% if fix(a)>a then b=fix(a) else b=f
- <%@LANGUAGE="xxx" CODEPAGE="936"%>一般又分为<%
- 检测是否注册成功<% Set Jpeg =Server.CreateObject("Persi
- 本文由伯乐在线 - 敏捷翻译的史莉萍翻译自《Creating an Effective Color-Scheme for Web Desig
- mssql 的正式名字是 SQL Server MS公司出的。图形操作界面好一些,性能还可以。在在mssql和oracle上不能互换.支持O
- 网站域名一般都会选简短易记的,因为这对于网站宣传来说也可以省不少力。而被很多网站忽视的站内Url结构则在一定程度上反映出网站的整体架构。当设
- 内容摘要:图片切换效果在网页制作中经常被使用,好的切换效果不仅增加了网站的实用行也提升了网站的趣味性。而图片切换方法有的使用flash来实现
- 关于asp缓存函数,类什么的,在网上可以说笔笔皆是,为啥我要不辞辛苦去写一个呢?大概看了下,各有各的优点吧,可是大部分好像不可以缓存数据额,
- 前几天写了一个ajax的,总感觉代码比较多,今天晚上又得写了一下,感觉代码还是比较多,但还好的是,比较通用。谁有办法优化一下当然好。&nbs