模拟快递单号查询案例（放大输入内容）

[一天一个小技巧，网页666] 里面有一个制作小倒三角 ‘▽’ 的css代码，在网页中用处很广，一定要掌握奥。

购物使人Happy！下单之后，大家一定很期盼自己的宝贝何时能到吧？别着急，平台贴心地给出了快递单号，大家可以去快递平台输入单号查询宝贝的状态！那么那个增强体验感的放大输入内容到底是怎么做的呢？跟我一起来一探究竟吧！（另外告诉大家一个小秘密：在网页中按一次 ‘s’ ，光标就会自动定位到输入框奥，赶紧来试试吧）

附上代码，大家赶紧试一试吧，来增强自己页面的用户体验感！

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模拟快递单号查询案例</title><style type="text/css">* {margin: 0;padding: 0;}.search {position: relative;width: 200px;height: 100px;}.con {display: none;position: absolute;top: 17px;left: 20px;width: 167px;height: 28px;border: 1px solid #CCCCCC;box-shadow: 0 2px 4px rgba(0, 0, 0, .2);font-size: 18px;color: #000;}.con::after {position: absolute;top: 27px;left: 18px;/* 倒三角 '▽’ 符号的制作 */content: '';width: 0;height: 0;border-top: 8px solid #fff;border-right: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 8px solid transparent;}.search input {margin: 60px 0 0 20px; }</style></head><body><div class="search"><div class= "con"></div><input type="text" placeholder="请输入..."></div><script>var input = document.querySelector('input');var con = document.querySelector('.con');//1. 当输入s时，获得焦点document.addEventListener('keyup', function(e){//console.log(e.keyCode);  //用于得到s的ASCII码值 : 83if (e.keyCode === 83) {input.focus();}//当输入框中有内容时，就显示上方盒子，并将内容写入input.addEventListener('keyup', function(){if (input.value !== '') {con.style.display = 'block';con.innerHTML = input.value;} else {con.style.display = 'none';}})//当我们失去焦点时，就隐藏上方这个盒子input.addEventListener('blur', function(){con.style.display = 'none';})//当我们重新获得焦点时,就显示上方这个盒子input.addEventListener('focus', function(){//当获得焦点时，如果内容为空则不显示上方这个盒子，如果内容不为空则显示（针对按键‘s’获得焦点的情况）if (input.value !== '') {con.style.display = 'block';con.innerHTML = input.value;} else {con.style.display = 'none';}})})</script></body>
</html>

本人初学前端，想往全栈发展。有时间会更一些学习过程中的小技巧或心得体会！有兴趣的伙伴可以加我一起学习，共同进步！

模拟快递单号查询案例（放大输入内容）相关推荐

模拟京东快递单号查询案例2020/11/24
模拟京东快递单号查询案例快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大) 表单检测用户输入: 给表单添加键盘事件同时把快递单号里面的值(value)获取过来赋值给 con ...
JS模拟京东搜索框案例模拟京东快递单号查询案例
模拟京东搜索框案例 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
简单模拟快递单号查询页面展示
案例分析: ①快递单号输入内容时,上面的大号字体盒子(con)显示(这里面的文字 ②同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容 ③如果快递单号里面内容为 ...
js模拟快递单号查询
案例分析 1.快递单号输入内容时,上面的大号字体盒子显示这里面的数字 2.同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容 3.如果快递单号里面内容为空,则隐 ...
773-780---DOM事件高级（常用鼠标事件，案例：跟随鼠标的天使，常用的键盘事件，案例：模拟京东按键输入内容，案例：模拟京东快递单号查询）
文章目录事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表案例 ...
本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询
本节作业之跟随鼠标的天使.模拟京东按键输入内容.模拟京东快递单号查询 1 跟随鼠标的天使 2 模拟京东按键输入内容 3 模拟京东快递单号查询 1 跟随鼠标的天使 <!DOCTYPE html&g ...
输入快递单号查询不到物流怎么办
在查询快递物流的时候,我们可能会遇到这样或者那样的问题,比如输入快递单号却查不到物流,对于这种情况,该怎么办呢?下面随小编一起来学习一下. 一般情况下,查不到物流有这几种情况: 单号或者快递公司错误, ...
快速免费对接快递鸟圆通快递单号查询api接口
快递查询API接口是使用的物流单号即可实现查询物流信息.主要应用在电商商城.ERP系统商.WMS系统商.快递柜.银行等企业.多家快递物流公司接口统一接入,建议对接接口提供商,一次性可以接入多家快递,在 ...
国内主流物流公司常用快递单号查询API接口全攻略
此接口支持***顺丰.EMS.申通.圆通.韵达.汇通.中通.天天.德邦.极兔.京东.全峰***等主流快递公司目的便于用户理解快递单号查询接口作用并正确应用到实际场景. 接口作用轨迹类接口包含:即 ...

模拟快递单号查询案例（放大输入内容）

模拟快递单号查询案例（放大输入内容）相关推荐

最新文章

热门文章