半角数字と半角ハイフン以外入力できないテキストボックスを作りたい

実現したいこと

HTMLとjsを使って電話番号などの入力を想定した、半角数字と半角ハイフン以外入力できないテキストボックスを作る。

前提

ChatGPTが生成したコードをそのまま使用。
jsを使用し、inputイベントが発生する度に正規表現による入力値の置換を行う。

発生している問題・エラーメッセージ

テキストボックスに適当な半角数字かハイフンを何文字か入力しておきます。
その状態で全角文字を入力しようとしても仕様通り入力ができないかと思います。
しかしそれを無視して大量の全角文字を入力し続けると、入力していた半角数字かハイフンまで何故か消えてしまいます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <title>半角数字と半角ハイフンのみ入力</title>
5</head>
6<body>
7  <label for="inputField">入力フィールド：</label>
8  <input type="text" id="inputField">
9
10  <script>
11    // 入力フィールドを取得
12    var inputField = document.getElementById('inputField');
13    
14    // イベントリスナーを追加して、入力内容が変更された際に制限をかける処理を実行
15    inputField.addEventListener('input', function() {
16      // 入力された値を取得
17      var inputValue = inputField.value;
18      
19      // 正規表現を使用して、半角数字と半角ハイフン以外の文字を削除
20      var sanitizedValue = inputValue.replace(/[^0-9-]/g, '');
21
22      // フィールドの値を制限した値に設定
23      if (inputValue !== sanitizedValue) {
24        inputField.value = sanitizedValue;
25      }
26    });
27  </script>

行動規範の内容に同意します

回答1件

ベストアンサー

私の環境では chrome → 再現した、firefox → 再現しない(問題なし) で、
chrome の方は全角1文字ずつ入力する → 元々あった半角数字の末尾1文字ずつ置き換わってだんだん短くなっていく…のような挙動でした。
なんとなくIME入力中文字列(js側処理で消えてない)とinput.valueに残った文字列が干渉しているような気がします。
原因特定はできませんでしたが、タイミング問題ではなく、IME入力状態そのものがinputイベントと相性が悪そうです。

案1 inputイベント以外

inputでは入力途中状態のテキストを扱うことになると思うので
テキスト確定済みでないと発火しないイベント(blurとかchangeとか)にすればおそらく問題はなくなると思います。
ただしリアルタイムで1文字ずつ検証はできず、入力が終わったと思ったら急に書き換えられるのでユーザ体験的には微妙かも…？