JavaScriptの正規表現による入力チェックで意図しない挙動が発生します。

Question

JavaScriptのoninputイベントで入力値チェックを行っています。現在、

<input type="text" name="test" id="test" pattern="^[0-9a-zA-Z]+$" maxlength="20"
oninput="this.value = this.value.replace(/[^0-9a-zA-Z]/g, '');">

と書いているのですが、半角英数字以外を入力したときに「1文字消去」される挙動となります。
例えば
「123456」と入力してある状態で全角の「ｋ」を入力すると「12345」になります。
「1文字消去」ではなく、単に入力不可になる挙動にしたいのですが、
どう修正すればよいでしょうか？

Comments

[Cocode]

コードをコピペして確認してみましたが、質問者様の意図通りの動きになっていました。
https://jsfiddle.net/4uv63abk/

[m.ts10806]

再現するブラウザなど環境を提示してください。
コードも一部ではなく全部の方が良いと思います。
該当箇所以外をこちらで補完してしまうと同じ状況になりません。

Answer 1

IMEをオンにして全角を入力すると症状が発生するようです。(Win11 Chrome で確認）
compositionstart compositionend イベントを使ってIMEでの入力は入力完了後に処理することで対応することができます。

下記にサンプルがありました。

JavaScript サンプル: 入力できる値を半角英数字のみにする

Comments

[sasaki0628]

ありがとうございます。非常に勉強になりました。

Answer 2

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const func_inp=()=>test.value=test.value.replace(/[^0-9a-zA-Z]/g, '');
  test.addEventListener('input',func_inp);
  test.addEventListener('compositionstart',()=>{
    test.removeEventListener('input',func_inp);
  });
  test.addEventListener('compositionend',()=>{
    test.addEventListener('input',func_inp);
    func_inp();
  });

});
</script>
<form>
<input type="text" id="test"></form>

Comments

[sasaki0628]

具体的に書いていただきありがとうございます。よく理解することができました。