//要求 当我们在文本框中输入内容时 文本框上面自动显示大字号内容
// 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>