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 对象链式操作测试代码
Apr 25 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
javascript事件处理模型实例说明
May 31 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 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
sae使用smarty模板的方法
2013/12/17 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
js实现消息滚动效果
2017/01/18 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
实例讲解python中的序列化知识点
2018/10/08 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
酒店执行总经理岗位职责
2013/12/15 职场文书
服装设计专业自荐信
2014/06/17 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
小学六一主持词开场白
2015/05/28 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android