案例:模拟京东快递单号查询
//要求 当我们在文本框中输入内容时 文本框上面自动显示大字号内容 // 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 width: 100000px; 15 height: 300px; 16 background-color: cornflowerblue; 17 font-size: 200px; 18 } 19 .search { 20 position: relative; 21 width: 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>