这篇文章将为大家详细讲解有关利用javascript模仿一个快递单号查询功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
具体内容如下
要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容
分析：
输入内容时，上面的大盒子会自动显示出来（这里字号更大）
表单检测用户输入，给表单添加键盘事件
同时把快递单号里面的值（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模仿一个快递单号查询功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
