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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
javascript轮播图算法
Oct 21 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
Node.js API详解之 readline模块用法详解
May 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 分页类实现代码
2009/12/03 PHP
php利用事务处理转账问题
2015/04/22 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
Vue表单实例代码
2016/09/05 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
Vue不能观察到数组length的变化
2018/06/08 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
python根据出生年份简单计算生肖的方法
2015/03/27 Python
详解python单例模式与metaclass
2016/01/15 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
wxPython之解决闪烁的问题
2018/01/15 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
《灯光》教学反思
2014/02/08 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
医学专业大学生求职信
2014/07/12 职场文书
商务经理岗位职责
2014/07/30 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
mysql函数之截取字符串的实现
2022/08/14 MySQL