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 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>Document</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 .search { 15 position: relative; 16 /* width: 178px; */ 17 margin: 100px; 18 } 19 20 .con { 21 display: none; 22 position: absolute; 23 top: -40px; 24 /* width: 171px; */ 25 border: 1px solid rgba(0, 0, 0, 0.2); 26 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 27 padding: 5px 0; 28 font-size: 18px; 29 line-height: 20px; 30 color: #333; 31 } 32 33 .con::before { 34 content: ‘‘; 35 width: 0; 36 height: 0; 37 position: absolute; 38 top: 28px; 39 left: 18px; 40 border: 8px solid #000; 41 border-style: solid dashed dashed; 42 border-color: #fff transparent transparent; 43 } 44 </style> 45 </head> 46 47 <body> 48 <div class="search"> 49 <div class="con">123</div> 50 <input type="text" placeholder="请输入您的快递单号" class="jd" /> 51 </div> 52 <script> 53 // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大） 54 // 表单检测用户输入： 给表单添加键盘事件 55 // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容 56 // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子 57 var con = document.querySelector(‘.con‘) 58 var jd_input = document.querySelector(‘.jd‘) 59 //添加监听事件，keyup，不能用其他，因为当用keydown时，程序先执行，里面的内容为空， 60 jd_input.addEventListener(‘keyup‘, function () { 61 // 判断输入框的值是否为空，如果不为空，再显示输入框 62 if (jd_input.value == ‘‘) { 63 con.style.display = ‘none‘ 64 } else { 65 con.style.display = ‘block‘ 66 con.innerHTML = jd_input.value 67 } 68 }) 69 //失去焦点隐藏上面的大号字体显示框； 70 jd_input.addEventListener(‘blur‘, function () { 71 con.style.display = ‘none‘ 72 }) 73 //获得焦点显示上面的大号字体显示框； 74 jd_input.addEventListener(‘focus‘, function () { 75 //如果输入框里面的值不为空时，再显示，如果为空就隐藏 76 if (this.value !== ‘‘) { 77 con.style.display = ‘block‘ 78 } 79 }) 80 </script> 81 </body> 82 </html>
原文：https://www.cnblogs.com/UnfetteredMan/p/13617400.html