当没有内容输入时 仅显示input框 和 提示内容 隐藏放大效果
当输入内容时 显示放大效果
失去焦点时 放大效果随之消失
获取焦点时 放大效果随之产生
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟京东快递单号查询</title> <style> .search { position: relative; width: 178px; margin: 100px; } .con { 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; } .con::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; } </style> </head> <body> <div class="search"> <div class="con"></div> <input type="text" placeholder="请输入您的快递单号" class="jd"> </div> <script> var con = document.querySelector('.con') var jd_input = document.querySelector('.jd') // keydown和keypress在文本框里面的特点: 他们两个事件触发的时候,文字还没有落入文本框中 // keyup 触发的时候,文字已落入文本框中 jd_input.addEventListener('keyup', function(){ if(this.value == ''){ con.style.display = 'none' }else{ con.style.display = 'block' con.innerText = this.value } }) // 当我们失去焦点 就隐藏这个con盒子 jd_input.addEventListener('blur',function(){ con.style.display = 'none' }) // 当我们获得焦点 就显示这个con盒子 jd_input.addEventListener('focus',function(){ if(this.value !== ''){ con.style.display = 'block' } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟京东快递单号查询</title> <style> .search { position: relative; width: 178px; margin: 100px; } .con { 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; } .con::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; } </style> </head> <body> <div class="search"> <div class="con"></div> <input type="text" placeholder="请输入您的快递单号" class="jd"> </div> <script> var con = document.querySelector('.con') var jd_input = document.querySelector('.jd') // keydown和keypress在文本框里面的特点: 他们两个事件触发的时候,文字还没有落入文本框中 // keyup 触发的时候,文字已落入文本框中 jd_input.addEventListener('keyup', function(){ if(this.value == ''){ con.style.display = 'none' }else{ con.style.display = 'block' con.innerText = this.value } }) // 当我们失去焦点 就隐藏这个con盒子 jd_input.addEventListener('blur',function(){ con.style.display = 'none' }) // 当我们获得焦点 就显示这个con盒子 jd_input.addEventListener('focus',function(){ if(this.value !== ''){ con.style.display = 'block' } }) </script> </body> </html>
不积跬步无以至千里 不积小流无以成江海
