JS 模仿京东键盘输入内容

css代码

 .search {
             width: 300px;
             height: 80px;
             margin: 0 auto;
             position: relative;
         }

         .con {
             display: none;
             position: absolute;
             top: 5px;
             line-height: 20px;
             font-size: 18px;
             width: 280px;
             border: 1px solid rgba(0, 0, 0, 2);
             padding: 5px 0;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 2);
             color: #333;
         }

         .jd {
             position: absolute;
             top: 50px;
             width: 280px;
             height: 20px;
         }

         .con::before {
             content: '';
             width:;
             height:;
             position: absolute;
             top: 28px;
             left: 18px;
             border: 8px solid #000;
             border-style: solid dashed dashed;
             border-color: #fff transparent transparent;
         }

HTML代码

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

JS代码

 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'
                 }
             })
         })

效果图