案例：模拟京东快递单号查询

//要求 当我们在文本框中输入内容时 文本框上面自动显示大字号内容
        // 1.快递单号输入内容 大字号盒子就会显示出来 （这里面的字号更大）
        // 2.表单检测用户输入 给表单添加键盘事件
        // 3.同时 把快递单号里面的值value 获取过来 赋值给con盒子 innertext 作为内容
        // 4.如果快递单号里面的内容为空 隐藏大号字体盒子

        //5.当我们失去了焦点 就隐藏con盒子
        //6.当我们获得焦点我们就显示con这个盒子

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         div {
 9             margin: 100px auto;
10         }
11         .con {
12             display: none;
13             position: absolute;
14              100000px;
15             height: 300px;
16             background-color: cornflowerblue;
17             font-size: 200px;
18         }
19         .search {
20             position: relative;
21              178px;
22             margin: 100px;
23         }
24     </style>
25 </head>
26 <body>
27     <div>
28         <div class="con"></div>
29         <input type="text" placeholder="请输入您的快递单号" class="jd">
30     </div>
31     <script>
32         //要求 当我们在文本框中输入内容时 文本框上面自动显示大字号内容
33         // 1.快递单号输入内容 大字号盒子就会显示出来 （这里面的字号更大）
34         // 2.表单检测用户输入 给表单添加键盘事件
35         // 3.同时 把快递单号里面的值value 获取过来 赋值给con盒子 innertext 作为内容
36         // 4.如果快递单号里面的内容为空 隐藏大号字体盒子
37         var con = document.querySelector('.con'); 
38         var jd = document.querySelector('.jd')
39         jd.addEventListener('keyup',function(){
40             if(this.value == ''){
41                 con.style.display = 'none';
42             }else{
43                 con.style.display = 'block';
44                 con.innerHTML = this.value;
45             }
46         })
47         // 注意：keydown和keypress文本框里面的特点 他们两个事件触发的时候 文字还没落入文本框
48         // keyup事件触发的时候 文字已经落入文本框了
49         //5.当我们失去了焦点 就隐藏con盒子
50         jd.addEventListener('blur',function(){
51             con.style.display = 'none'
52         })
53         //6.当我们获得焦点我们就显示con这个盒子
54         jd.addEventListener('focus',function(){
55             if(this.value != ''){
56                 con.style.display = 'block'
57             }
58         })
59     </script>
60 </body>
61 </html>