javascript实现京东快递单号的查询效果


Posted in Javascript onNovember 30, 2020

案例:模拟京东快递单号的查询效果,供大家参考,具体内容如下

要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容

分析:

  • 输入内容时,上面的大盒子会自动显示出来(这里字号更大)
  • 表单检测用户输入,给表单添加键盘事件
  • 同时把快递单号里面的值(value)获取过来复制给大盒子作为内容
  • 如果快递单号里面内容为空,就隐藏大盒子
  • 当失去焦点,大盒子也隐藏

注意:keydown 和 keypress 在文本框里面的特点 : 他们两个事件触发的时候,文字还没有落入文本框中,keyup 事件触发的时候,文本已经落入文本框里了

<style>
  * {
  padding: 0;
  margin: 0;
  }
  .search {
  position: relative;
  width: 178px;
  margin: 100px;
  }
  .con {
  display: none;
  position: absolute;
  top: -48px;
  width: 171px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 5px 0;
  font-size: 18px;
  line-height: 20px;
  color: #333;
  }
  .con::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 28px;
  left: 18px;
  border: 8px solid #000;
  border-style: solid dashed dashed;
  border-color: #fff transparent transparent;
  }
 </style>
 </head>
 <body>
 <div class="search">
  <div class="con"></div>
  <input type="text" placeholder="请输入您的快递单号" class="jd" />
 </div>
 <script>
  var con = document.querySelector(".con");
  var jd_input = document.querySelector(".jd");
  jd_input.addEventListener("keyup", function () {
  if (this.value == "") {
   con.style.display = "none";
  } else {
   con.style.display = "block";
   con.innerHTML = this.value;
  }
  });
  //当失去焦点,就隐藏盒子
  jd_input.addEventListener("blur", function () {
  con.style.display = "none";
  });
  //当获得焦点,就显示盒子
  jd_input.addEventListener("focus", function () {
  if (this.value !== "") {
   con.style.display = "block";
  }
  });
 </script>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
Vue核心概念Action的总结
Jan 18 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
JS模拟实现京东快递单号查询
Nov 30 #Javascript
JavaScript实现京东快递单号查询
Nov 30 #Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 #Javascript
express异步函数异常捕获示例详解
Nov 30 #Javascript
详解Vue 的异常处理机制
Nov 30 #Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 #Vue.js
JavaScript实现商品评价五星好评
Nov 30 #Javascript
You might like
PHP文件注释标记及规范小结
2012/04/01 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
社保转移委托书范本
2014/10/08 职场文书
师德标兵事迹材料
2014/12/19 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android