JS仿淘宝搜索框用户输入事件的实现


Posted in Javascript onJune 19, 2017

淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示:

JS仿淘宝搜索框用户输入事件的实现

大家可以看到,当页面一打开,搜索框中就可以看到灰色字体“少女高跟鞋”,还有闪烁的光标。当用户点击输入的时候,灰色字消失。当用户清空文本框的所有内容的时候,灰色字自动恢复。

接下来,这个小案例就是要介绍如何实现这种效果,即用户输入事件。

判断用户输入的事件有 oninput 和onpropertychange 。当然,想必你能想到,由于浏览器兼容的问题,他们出现的场合有所不同。 正常浏览器支持oninput ,而 IE6、IE7、IE8 支持的 onpropertychange 。

为了节省时间,不再模仿淘宝CSS样式。

代码及解析 :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>判断用户输入事件第2遍oninput 和onpropertychange 的用法</title>
</head>
 <style>
    .search {
      width:300px;
      height: 30px;
      margin: 100px auto;
      position: relative;
    }
    .search input {
      width:200px;
      height:25px;
    }
    .search label {
      font-size: 12px;
      color:#ccc;
      position: absolute;
      top:8px;
      left:10px;
      cursor: text;
    }
  </style>
  <script type="text/javascript">
  业务逻辑分析:
//      1.内容为空时,光标和默认字显示在搜索框。自动获取焦点
//      2.当输入内容时,默认字消失。用oninput事件
    window.onload = function () {
      function $(id){ return document.getElementById(id);}
      $("txt").focus();//自动获取光标方法
      $("txt").oninput = $("txt").onpropertychange = function () {
      //oninput 大部分浏览器支持 检测用户表单输入内容
      //onpropertychange ie678 检测用户表单输入内容
        if ( this.value == ""){
          // 首先判断文本框里的值是否为空。注意用双等号!
          $("message").style.display = "block";
        } else {
          $("message").style.display = "none";
        }
      }
    }
  </script> 
<body>
<div class="search">
  <input type="text" id="txt">
  <label for="txt" id="message">仿淘宝搜索框</label>
  <!-- 注意label 中for属性 值指向 input 的id值 ,意思是把label标签和input表单相关联。
  label 元素不会向用户呈现任何特殊效果。当用户在label元素内点击文本, 浏览器就会自动将焦点转到和标签相关联的表单控件上。 -->
</div>
</body>
</html>

效果:

JS仿淘宝搜索框用户输入事件的实现

以上所述是小编给大家介绍的JS仿淘宝搜索框用户输入事件的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
微信小程序实现皮肤功能(夜间模式)
Jun 18 #Javascript
关于javascript作用域的常见面试题分享
Jun 18 #Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 #Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 #Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 #Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 #Javascript
You might like
打造计数器DIY三步曲(下)
2006/10/09 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
jQuery参数列表集合
2011/04/06 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
python实现进程间通信简单实例
2014/07/23 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
村委会主任先进事迹
2014/01/15 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
汽车车尾标语大全
2015/08/11 职场文书
超市主管竞聘书
2015/09/15 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers