JS 模仿京东键盘输入内容

Posted 2020-11-27 徐许

css代码

 1 .search {
 2             width: 300px;
 3             height: 80px;
 4             margin: 0 auto;
 5             position: relative;
 6         }
 7 
 8         .con {
 9             display: none;
10             position: absolute;
11             top: 5px;
12             line-height: 20px;
13             font-size: 18px;
14             width: 280px;
15             border: 1px solid rgba(0, 0, 0, 2);
16             padding: 5px 0;
17             box-shadow: 0 2px 4px rgba(0, 0, 0, 2);
18             color: #333;
19         }
20 
21         .jd {
22             position: absolute;
23             top: 50px;
24             width: 280px;
25             height: 20px;
26         }
27 
28         .con::before {
29             content: ‘‘;
30             width: 0;
31             height: 0;
32             position: absolute;
33             top: 28px;
34             left: 18px;
35             border: 8px solid #000;
36             border-style: solid dashed dashed;
37             border-color: #fff transparent transparent;
38         }

html代码

<div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>

JS代码

 1 var con = document.querySelector(‘.con‘)
 2         var jd_input = document.querySelector(‘.jd‘)
 3         jd_input.addEventListener(‘keyup‘, function () {
 4             if (this.value == ‘‘) {
 5                 con.style.display = ‘none‘
 6             } else {
 7                 con.style.display = ‘block‘
 8                 con.innerHTML = this.value;
 9             }
10             // 当失去焦点就隐藏盒子
11             jd_input.addEventListener(‘blur‘, function () {
12                 con.style.display = ‘none‘
13             })
14             jd_input.addEventListener(‘focus‘, function () {
15                 if (this.value !== ‘‘) {
16                     con.style.display = ‘block‘
17                 }
18             })
19         })