輸入: 數字輸入Bug修復

在無聊刷視頻的時候，看到了這樣的一個視頻:

於是自己去試了一試，確實存在這個問題，自己也按照小山的修復辦法測試了一些也確實能夠修復此問題。但是自己在測試時無意發現例如在輸入中文時，此時我們按下鍵盤中的⬆️鍵 /⬇️鍵會修改input:number文本框的值，意識到這應該不是用戶所期望的行為，這裡的值不應該發生變化。於是自己便嘗試性的修復一下這個問題。以下是自己的修復示例代碼:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Buyu</title>
  </head>
  <body>
    <input style="text-align: center;" type="number">
    <script>
      const input = document.querySelector("input");
      const numberReg = /^\d+$/g;
      let lock = false;
      input.addEventListener("input", (e) => {
        if (e.target.type !== "number") return;
        if (e.data && !numberReg.test(e.data)) lock = true;
        else if (!e.data) lock = false;
        if (e.target.value === "" && e.data === "") {
          e.target.value = 0;
          setTimeout(() => e.target.value = "");
        }
      });
      function stopInputNumberEvent(event) {
        if (lock && (event.key === "ArrowDown" || event.key === "ArrowUp") && event.target.type === 'number') {
          event.preventDefault();
        }
      };
      input.addEventListener("focus", (e) => {
        document.addEventListener("keydown", stopInputNumberEvent);
      });
      input.addEventListener("blur", (e) => {
        document.removeEventListener("keydown", stopInputNumberEvent);
      });
    </script>
  </body>
</html>

修復此問題主要方法為:

監聽鍵盤事件行為，在合適的時機屏蔽鍵盤的默認行為
監聽用戶輸入是否為非數字行為
- 需要注意，input事件中的event.data與e.target.value是不同的，一個代表這次的輸入值，一個代表輸入框中的值

此問題為原生瀏覽器就存在的問題，無關於框架或其他

筆者在測試時使用的瀏覽器為 Chrome，版本為 115.0.5790.114，系統為 MacOS13.5 (22G74)