淘宝的搜索框就用到了这样一种设计:
淘宝搜索框效果实现分析
这种设计一般是用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执行前,那段提示文字也是无论如何都不会消失,用户也是想删掉这段文字,但是他们删不了,因为这些文字实际上并不在输入框内,而他们输入的内容会被提示文字挡住了。我个人认为这给用户带来了很大的疑惑。
淘宝搜索框效果实现分析

标签:
淘宝,搜索框

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“淘宝搜索框效果实现分析”

暂无“淘宝搜索框效果实现分析”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。