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 相关文章推荐
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
详解Vue的options
May 15 Vue.js
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+DBM的同学录程序(5)
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
Laravel框架表单验证详解
2014/09/04 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
Python urls.py的三种配置写法实例详解
2017/04/28 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python提取xml里面的链接源码详解
2019/10/15 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
社区消防工作实施方案
2014/03/21 职场文书
《花木兰》教学反思
2014/04/09 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS