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 相关文章推荐
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
分析javascript原型及原型链
Mar 18 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
javascript实现数字时钟效果
Feb 06 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
python实现划词翻译
2020/04/23 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Python制作词云的方法
2018/01/03 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
简单了解Python write writelines区别
2020/02/27 Python
Python多线程thread及模块使用实例
2020/04/28 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
签约仪式主持词
2014/03/19 职场文书
战略合作意向书范本
2014/04/01 职场文书
社区国庆节活动总结
2015/03/23 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis