本人一直在跟进哔哩哔哩pink的学习视频，遇到了一个模拟京东快递单号查询的案例，写完之后发现与原案例有点差别，但pink也没有教，自己绞尽脑汁，冥思苦想终不得其解，于是乎只能提问请教，希望可以补充解决一下，阿里嘎多。
原案例图：
连接：https://www.baidu.com/s?word=%E4%BA%AC%E4%B8%9C%E7%89%A9%E6%B5%81&tn=68018901_10_oem_dg
已知bug：
1：输入的内容如果超出文本框，文本框不会自动加长(详细可以与原案例对比)
2：在解决 问题1 的情况下如果长按任意键3秒会出现内容超出文本框(详细可以与原案例对比)
3：输入的内容如果超出文本框，删除时文本框不会自动减短(详细可以与原案例对比)
4：在解决 1,2,3 后，如果输入的是非数字型(如+/*-)内容，在加减内容是文本框的长度会出现问题(详细可以与原案例对比)
暂时只发现这些bug，反正要跟原案例一样
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模拟京东快递单号查询</title>
<!--
1、快递单号输入内容时，上面的大号字体盒子(con)显示(这里面的字号更大)。
2、表单检测用户输入: 给表单添加键盘事件。
3、同时把快递单号里面的值 (value)获取过来赋值给con盒子(innerHtml)做为内容。
4、如果快递单号里面内容为空，则隐藏大号字体盒了(con)盒子。
-->
</head>
<style type="text/css">
#express_query {
position: relative;
width: 500px;
margin: 50px auto;
text-align: center;
background-color: #FAFAFA;
}
input {
height: 25px;
margin-left: 15px;
}
#express_number {
margin-top: 20px;
text-indent: 4px;
}
.con {
display: none;
position: absolute;
top: 0px;
right: 129px;
width: 161px;
height: 33px;
border: 1px solid #ccc;
background-color: #fff;
box-shadow: 3px 3px 10px;
font-size: 18px;
line-height: 33px;
}
.con::after {
content: '';
position: absolute;
top: 26px;
left: 25px;
width: 15px;
height: 15px;
/* border: solid;
border-color: #fff transparent transparent;
border-width: 15px 10px 10px 10px; */
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
</style>
<body>
<div id="express_query">
公司名称<input type="text" name="" id=""/><br/>
<div class="con"></div>
快递单号<input type="text" name="" id="express_number" placeholder="请输入您的快递单号"/>
</div>
</body>
<script type="text/javascript">
var express_number = document.querySelector('#express_number');
var con = document.querySelector('.con');
express_number.addEventListener('keyup',function(e) {
if (express_number.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerHTML = express_number.value;
}
});
express_number.addEventListener('focus',function() {
if (express_number.value !== '') {
con.style.display = 'block';
}
});
express_number.addEventListener('blur',function() {
con.style.display = 'none';
});
</script>
</html>
