JavaScript仿快递查询输入框

CSS样式

.div {
      position: relative;
      margin: 200px auto;
      width: 178px;
      height: 100px;
    }

    .content {
      display: none;
      position: absolute;
      top: -40px;
      widows: 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;
    }

• content默认隐藏 .con::before为小三角的样式

页面

<div class="div">
    <div class="content">123</div>
    <input type="text" placeholder="请输入快递单号" class="number">
  </div>

JavaScript样式

 var content = document.querySelector('.content');
    var jd_number = document.querySelector('.number');

    jd_number.addEventListener('keyup', function (e) {
      if (this.value == '') {
        content.style.display = 'none';
      } else {
        content.style.display = 'block';
        content.innerText = this.value;
      }
      
    })

最终效果