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 相关文章推荐
Google AJAX 搜索 API实现代码
Nov 17 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
详解Angular 4.x Injector
May 04 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
webpack打包多页面的方法
Nov 30 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
详解React路由传参方法汇总记录
Nov 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
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
生日礼品店创业计划书范文
2014/03/21 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
青岛导游词
2015/02/12 职场文书
敬老院活动感想
2015/08/07 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技