淘宝搜索框研究报告
作者: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执行前,那段提示文字也是无论如何都不会消失,用户也是想删掉这段文字,但是他们删不了,因为这些文字实际上并不在输入框内,而他们输入的内容会被提示文字挡住了。我个人认为这给用户带来了很大的疑惑。
猜你喜欢
- 本文实例讲述了python通过pil将图片转换成黑白效果的方法。分享给大家供大家参考。具体分析如下:pil功能强大,convert方法可以轻
- 1.创建多线程类全局变量 secclass work_thread(QThread): timer = pyqtSignal() # 每隔一
- 本文实例为大家分享了vue中使用svg封装全局消息提示组件的具体代码,供大家参考,具体内容如下先看效果图一、首先安装下载需要用到的svg相关
- 两种方式:1.IP+SID方式 2.配置链接方式1..IP+SID方式DbHelperOracle.connectionString = s
- 背景:路由结构/video/1.mp4,即/video是父路由,/1.mp4是/video的动态子路由,在/video父路由中会通过url的
- 前言动态语言Ruby、Python都有自己的虚拟环境,虚拟环境是程序执行时的独立执行环境,在同一台服务器中可以创建不同的虚拟环境供不同的系统
- 附加数据库就可以完成. 附加数据库: &nb
- 我就废话不多说了,大家还是直接看代码吧~#coding:utf-8import numpy as np## 改变数组的形状#将b 变成3*4
- 抢票是并发执行多个进程可以访问同一个文件多个进程共享同一文件,我们可以把文件当数据库,用多个进程模拟多个人执行抢票任务db.tx
- 本文为大家分享了mysql8.0下载与安装,供大家参考,具体内容如下首先要做的是下载8.0版本的mysql,可以到官网上去下,直接百度搜索m
- Python函数库众多,而且在不断更新,所以学习这些函数库最有效的方法,就是阅读Python官方文档。同时借助Google和百度。本文介绍的
- 1. 使用.logfile 方法#!/usr/bin/env pythonimport pexpectimport syshost=&quo
- 目录1.随机取小数:2.整数的随机选取:3.随机列表取数,元素打乱:总结1.随机取小数:import randomprint(random.
- 备份多个数据库可以使用如下命令:mysqldump -uroot -p123456 --databases test1 test2 test
- 不少需要用到sql2005的程序,有很多新手还是会操作,这里写个详细的图文教程送个菜鸟们,高手请飘过。适用于独立主机的朋友使用,如果你还没安
- 项目/框架初始化时可能需要保留一些空文件,这时候就需要批量新增gitkeepconst fs = require('fs')
- 本文实例讲述了Python中列表元素转为数字的方法。分享给大家供大家参考,具体如下:有一个数字字符的列表:numbers = ['1
- 类的定义假如要定义一个类 Point,表示二维的坐标点:# point.pyclass Point: def __init__(
- 一、问题描述 SQL Plus WorkSheet是一个窗口图形界面的SQL语句编辑器,对于那些喜欢窗口界面而不喜欢字符界面的用户,该工具相
- 实现一个简单地httpServer上一篇文章对http库的基本使用做了说明,下面来实现一个简单地httpServerpackage main