目录
重要!写代码前一定要进行案例分析
案例说明:
快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大)
快递无内容输入时,con盒子消失
案例分析 :
1.表单检测用户输入: 给表单添加键盘事件
2.同时把快递单号(input)里面的值(value)获取过来赋值给 con盒子(通过innerHTML)做为内容
3.如果快递单号内容为空,则隐藏大号字体盒子(con)
代码分析:
1.首先需要设置 一个 大的div盒子,内含表单输入框和“放大镜盒子”,并给它们设置一些样式;此部分代码实现如下:
<div class="search"> <div class="con">123</div> <input type="text" placeholder="请输入您的快递单号" class="jd"> </div>
placeholder="我是占位符
2.接下来进行js部分
(1)获取元素 放大镜【.con】和 输入框【jd_input】
(2)注册事件
当按下键盘时,如果输入框中内容为空,放大镜con的display为none;
如果有内容,放大镜的display为block,其文本内容innerHTML为你输入的内容
jd_input.addEventListener('keyup', function () { if (this.value == '') { con.style.display = 'none'; } else { con.style.display = 'block'; con.innerHTML = this.value; }
(3)当我们输入框失去焦点时,con隐藏;当我们输入框获得焦点且有内容时,con显示
(熟练if语句的运用)
// 当我们失去焦点,就隐藏这个con盒子 jd_input.addEventListener('blur', function () { con.style.display = 'none'; })
// 当我们获得焦点,就要进行一步判断 判断input里面有没有值; 如果input不为空,就显示这个con盒子 jd_input.addEventListener('focus', function () { if (this.value !== '') { //如果这个输入内容不为空 con.style.display = 'block'; } })
代码实现:(完整版)
<!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>Document</title> <style> * { margin: 0; padding: 0; } .search { position: relative; width: 178px; margin: 100px; } .con { display: none; 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">123</div> <input type="text" placeholder="请输入您的快递单号" class="jd"> </div> <script> var con = document.querySelector('.con'); var jd_input = document.querySelector('.jd'); jd_input.addEventListener('keyup', function () { if (this.value == '') { con.style.display = 'none'; } else { con.style.display = 'block'; con.innerHTML = this.value; } }) jd_input.addEventListener('blur', function () { con.style.display = 'none'; }) jd_input.addEventListener('focus', function () { if (this.value !== '') { con.style.display = 'block'; } }) </script> </body> </html>