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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
layui 弹出层值回传解决方式
Nov 14 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
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
javascript事件模型介绍
2016/05/31 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python基础篇之初识Python必看攻略
2016/06/23 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python 贪心算法的实现
2020/09/18 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
为什么要做架构设计
2015/07/08 面试题
优秀生推荐信范文
2013/11/28 职场文书
财务会计自荐信范文
2014/02/21 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
同意报考证明
2015/06/17 职场文书
严以律己学习心得体会
2016/01/13 职场文书
PHP控制循环操作的时间
2021/04/01 PHP