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获取textarea中的光标位置
May 06 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
javascript回到顶部特效
Jul 30 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
vue3.0 上手体验
Sep 21 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
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
yii的CURD操作实例详解
2014/12/04 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
Js apply方法详解
2017/02/16 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
python字符串排序方法
2014/08/29 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python安装sklearn模块的方法详解
2020/11/28 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
深圳茁壮笔试题
2015/05/28 面试题
网管求职信
2014/03/03 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
岗位聘任报告
2015/03/02 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS