Web前端制作模拟京东快递单号查询案例

本人一直在跟进哔哩哔哩pink的学习视频，遇到了一个模拟京东快递单号查询的案例，写完之后发现与原案例有点差别，但pink也没有教，自己绞尽脑汁，冥思苦想终不得其解，于是乎只能提问请教，希望可以补充解决一下，阿里嘎多。

原案例图：

img


连接：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>