简单模拟快递单号查询页面展示_快递查询运行模拟图-CSDN博客

本文链接：https://blog.csdn.net/ABU_ablm/article/details/125772228

该案例展示了如何创建一个简单的快递单号查询页面。当输入框获取焦点且内容不为空时，会在其上方显示一个大号字体的提示框，显示输入的快递单号；失去焦点或输入为空时，提示框将隐藏。主要使用了JavaScript的keyup事件监听输入变化，以及focus和blur事件来控制提示框的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例分析：

①快递单号输入内容时，上面的大号字体盒子(con)显示（这里面的文字
②同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容
③如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
④注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还
没有落入文本框中。
⑤keyup:事件触发的时候，文字已经落入文本框里面了
⑥当我们失去焦点，就隐藏这个con盒子
⑦当我们获得焦点，并且文本框内容不为空，就显示这个con盒子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.search {
position: relative;
width: 178px;
margin: 100px;
}
.con {
display: none;
position: absolute;
top: -40px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 5px 10px;
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>
<body>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd" />
</div>
<script>
var con = document.querySelector(".con");
var jd_search = document.querySelector(".jd");
jd_search.addEventListener("keyup", function (e) {
if (this.value === "") {
con.style.display = "none";
} else {
con.style.display = "block";
con.innerHTML = this.value;
}
});
// 当我们失去焦点就隐藏这个con盒子
jd_search.addEventListener("blur", function (e) {
con.style.display = "none";
});
// 当我们获得焦点就显示这个con盒子
jd_search.addEventListener("focus", function (e) {
if (this.value !== "") {
con.style.display = "block";
}
});
</script>
</body>
</html>