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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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 cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
Python实现控制台输入密码的方法
2015/05/29 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
基于Python os模块常用命令介绍
2017/11/03 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
python 等差数列末项计算方式
2020/05/03 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
Django如何实现防止XSS攻击
2020/10/13 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
学校春季防火方案
2014/06/08 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android