案例:模拟京东快递单号的查询效果
案例:模拟京东快递单号的查询效果
要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容
分析:
- 输入内容时,上面的大盒子会自动显示出来(这里字号更大)
- 表单检测用户输入,给表单添加键盘事件
- 同时把快递单号里面的值(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>
案例:模拟京东快递单号的查询效果相关推荐
- 模拟京东快递单号的查询效果
1.上面放大框开始是隐藏的,当输入单号后,就显示,并且里面的内容是输入框的内容的字体的放大 <!DOCTYPE html> <html lang="en"> ...
- JS模拟京东搜索框案例 模拟京东快递单号查询案例
模拟京东搜索框案例 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
- 模拟京东快递单号查询案例2020/11/24
模拟京东快递单号查询案例 快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大) 表单检测用户输入: 给表单添加键盘事件 同时把快递单号里面的值(value)获取过来赋值给 con ...
- 773-780---DOM事件高级(常用鼠标事件,案例:跟随鼠标的天使,常用的键盘事件,案例:模拟京东按键输入内容,案例:模拟京东快递单号查询)
文章目录 事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象 案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表 案例 ...
- 本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询
本节作业之跟随鼠标的天使.模拟京东按键输入内容.模拟京东快递单号查询 1 跟随鼠标的天使 2 模拟京东按键输入内容 3 模拟京东快递单号查询 1 跟随鼠标的天使 <!DOCTYPE html&g ...
- css实现小气泡样式和模拟京东快递单号放大效果
css实现小气泡样式:border-color: #fff transparent transparent; transparent表示透明,第一个代表上三角,第二个代表左右三角,第三个代表下三角 & ...
- Web APIs:事件高级--键盘事件,京东按键输入及模拟京东快递单查询案例
常用的键盘事件 keydown和keypress的区别是keypress不识别功能键 例如ctrl,shift 执行顺序keydown>keypress>keyup keyCode判断用户 ...
- JavaScript网页制作--京东快递单号查询
JavaScript网页制作–京东快递单号查询 上篇讲到了京东网页的一个可能不被大多数人熟知的小功能,S键自动获得焦点,相比于那个功能,这个快递单号查询的功能可能更明了一点,虽然我也觉得很鸡肋.在网页 ...
- 微海快递单号批量查询 v1.0
简介: 微海快递单号批量查询软件界面简单直观,您可以利用它来对快递单号进行批量查询,使用方法也十分简单,只需要将需要查询的单号以一行一个的形式输入进软件内,就可以快速查询到相关的物流信息,方便快递公司 ...
最新文章
- linux关机正确方法
- 设计模式-结构型-代理
- 灰色的rgb值_一行代码实现图片的灰色效果
- SAP Spartacus的double maintenance -使用Cherrypick进行维护工作
- [TJOI2014] Alice and Bob
- arcgis 字段计算器 条件赋值_ArcGIS中属性表的常用操作汇总
- 语言环境及apt工具使用方法
- JDK版本变化也太快了,意义有多大?
- PMP新大纲考试真题
- fluent并行 linux_[转载]windows系统下启动linux主机群的fluent并行操作
- d3js精通教程_d3js从基础到精通第二部分
- 零基础入门微信小程序开发
- 计算机玩游戏特别卡,Win7电脑游戏卡顿怎么办 win7玩游戏卡如何解决
- 小米4android8.0root,小米8青春版获取root权限的教程
- [2020.8.3]联想 A5(L18011) Magisk ROOT 纯净无推广 一键刷机 ZUI_3.9.068
- 企业员工生日提醒短信怎么发送
- Android 发布代码到github 并且部署到 JitPack maven 仓库详细步骤
- 关于笔记本电脑Linux下耳机电流噪声--已解决
- Hyperlegder Fabric监控:blockchain-explorer
- 【渝粤教育】电大中专Office办公软件 (2)_1作业 题库