案例:模擬京東快遞單號的查詢效果

楊蛋蛋~R發表於2020-10-04

案例:模擬京東快遞單號的查詢效果

要求：當我們在文字框中輸入內容時，文字框上面自動顯示大字號的內容
分析：

  • 輸入內容時，上面的大盒子會自動顯示出來（這裡字號更大）
  • 表單檢測使用者輸入，給表單新增鍵盤事件
  • 同時把快遞單號裡面的值（value）獲取過來複制給大盒子作為內容
  • 如果快遞單號裡面內容為空，就隱藏大盒子
  • 當失去焦點，大盒子也隱藏

注意：keydown 和 keypress 在文字框裡面的特點 ： 他們兩個事件觸發的時候，文字還沒有落入文字框中，keyup 事件觸發的時候，文字已經落入文字框裡了

  <style>
      * {
        padding: 0;
        margin: 0;
      }
      .search {
        position: relative;
        width: 178px;
        margin: 100px;
      }
      .con {
        display: none;
        position: absolute;
        top: -48px;
        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"></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>

相關文章