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.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
js propertychange和oninput事件
Sep 28 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
九种原生js动画效果
Nov 11 Javascript
React中的render何时执行过程
Apr 13 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
详解vue在项目中使用百度地图
Mar 26 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
通过实例了解python property属性
2019/11/01 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
python能开发游戏吗
2020/06/11 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
活动志愿者自荐信
2014/01/27 职场文书
信息技术培训感言
2014/03/06 职场文书
大学信息公开实施方案
2014/03/09 职场文书
卖房协议书
2014/04/11 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
求职教师自荐书
2014/06/19 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers