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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
深入认识JavaScript中的函数
Jan 22 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
vue实现百度搜索功能
Dec 28 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
PHP学习之正则表达式
2011/04/17 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
php里array_work用法实例分析
2015/07/13 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
python代码实现ID3决策树算法
2017/12/20 Python
python生成lmdb格式的文件实例
2018/11/08 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
python interpolate插值实例
2020/07/06 Python
几道Java和数据库的面试题
2013/05/30 面试题
银行求职信
2014/05/31 职场文书
银行业务授权委托书
2014/10/10 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书