按任意键选中输入框，并放大显示输入的快递单号

川长思鸟来 2022-12-21 11:58 79阅读 0赞

## 仿京东快递单号： ##

先看效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]

*核心思路如下：*

1.  获取输入框、显示栏元素
2.  文档document添加监听事件和设置键盘事件。按任意按钮，输入框获得焦点
3.  输入框myIpt添加监听事件和设置键盘事件。若输入文字则出现显示栏并显示内容

`结构代码如下：`

`scirpt核心代码如下：`

`样式代码如下：`

* { 
                padding: 0px;
                margin: 0;
            }
            .box { 
                padding: 100px;
            }
            .search { 
                position: relative;
                width: 178px;
                height: 100px;
            }
            .showLine { 
                display: none;
                position: absolute;
                top:-40px;
                width: 171px;
                border: 1px solid rgba(0,0,0,.2);
                box-shadow: 0 2px 4px rgba(0,0,0,.2);
                padding: 5px 0;
                font-size: 18px;
                line-height: 20px;
                color: #333;
            }
            
             /*CSS三角美化*/
            .showLine::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;
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/5b37c3cf4bd44cd7b084744ad81f91ed.png