入力：数値入力のバグ修正

無聊なビデオを見ていると、このようなビデオを見つけました。

それで自分で試してみましたが、確かにこの問題が存在し、小山さんの修正方法に従っていくつかのテストも行い、この問題を修正できることが確認できました。しかし、テスト中に中国語を入力すると、キーボードの⬆️キー /⬇️キーを押すと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）を使用しました。