杰网资源 Design By www.escxy.com
案例：模拟京东快递单号的查询效果，供大家参考，具体内容如下
要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容
分析：
- 输入内容时，上面的大盒子会自动显示出来（这里字号更大）
- 表单检测用户输入，给表单添加键盘事件
- 同时把快递单号里面的值（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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
杰网资源 Design By www.escxy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
杰网资源 Design By www.escxy.com
暂无评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。