Input:number输入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>

修复此问题主要方法为:

	1. 监听键盘事件行为, 在合适的时机屏蔽键盘的默认行为
	2. 监听用户输入是否为非数字行为
   - 需要注意, `input`事件中的`event.data`与`e.target.value`是不同的, 一个代表这次的输入值, 一个代表输入框中的值

此问题为原生浏览器就存在的问题，无关于框架或其他

笔者在测试时使用的浏览器为 Chrome, 版本为 115.0.5790.114, 系统为 MacOS13.5 (22G74)