ThatManK Mobile Article
查询快递单号案例

Category: JS Tutorial: DOM操作 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0
查询快递单号

<!DOCTYPE html>
<html lang="en">
  <head>
    <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, 0.2);
        box-shadow: 0 2px 4px rgba(0, 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>
      // 快递单号输入内容时,  上面的大号字体盒子(con)显示(这里面的字号更大)
      // 表单检测用户输入： 给表单添加键盘事件
      // 同时把快递单号里面的值(value)获取过来赋值给 con盒子(innerText)做为内容
      // 如果快递单号里面内容为空, 则隐藏大号字体盒子(con)盒子
      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.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>