全角数字を半角数字にリアルタイムに置き換える処理で全角の「０」だけ半角「00」に置き換えられてしまう

Question

jQueryを利用して、入力された電話番号をリアルタイムに半角に直す制御を記述しております。

WindowsのChrome、Edge、MacのSafariで検証したところ、全角モードで「０」を入力した場合だけ、半角の「0」の1文字に変換されるべきところが、半角の「00」になってしまう時がある問題にぶつかっております。他の全角「１〜９」についてはこの事象は発生しておりません。

全角「０」だけこの事象が発生する原因がわからず、解決に向けてお力添えをいただきたいです。

なお、MacのChromeでは発生しないようです。

発生しているバージョン

• OS: Windows 10 21H1 19043.1766
• ブラウザ: Chrome 103.0.5060.33
• jQuery: 3.4.1（codepen上でjquery 3.6.0を指定し下記コードをセットしても同様でした）

<input minlength="9" id="tel" type="tel" name="tel">

$("#tel").on("keydown keyup input change blur", function (e) {
    var value = $(e.currentTarget).val();
    value = value
      .replace(/[０-９]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 65248);
      })
      .replace(/[^0-9]/g, '');
    $(e.currentTarget).val(value);
});

Comments

[maisumakun]

> 全角モードで「０」を入力した場合だけ

テンキーとフルキーのどちらかでだけ発生する、というような傾向はありますか？

[0x00000124]

テンキーでは発生しないですね。フルキーのみで発生しております。
よろしくお願いします

Answer 1

https://teratail.com/questions/qgveiam8wwb9dc
こちらの質問と回答が参考になるかもしれません。

Comments

[退会済みユーザー]

ややこしいですよね。最近Qiitaの記事で読みました：
[JavaScript]日本語IME入力中か判定する方法 - Qiita https://qiita.com/alt_yamamoto/items/8663d047a3794dd5605e

[0x00000124]

compositionstart, compositionendで実装したところ00になるバグを解消できましたのでこちらをベストアンサーにさせていただければと思います。ありがとうございました

Answer 2

入力された電話番号をリアルタイムに半角に直す制御を記述しております。

本題ではありませんが、入力中に値を変更すると「変換しようと思っていたものが強制的に確定させられる」など、入力側から意図しない動作となりがちです。

内輪でしか使わない、あるいは入念に動作を練った上で行うなら話は別ですが、変換はフォーカスの外れたときに一括して行う、ほうが操作性として上回る可能性もあります。

Answer 3

見た感じ問題なさそうですけどね
jQueryなのにthisを使わないところとか違和感ありますが

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  tel.addEventListener('input',()=>{
    const v=tel.value;
    if(/\D/.test(v)){
      tel.value=v.replace(/[０-９]/g,x=>String.fromCharCode(x.charCodeAt(0) - 65248)).replace(/\D/g,'');
    }
  });
});
</script>
<input minlength="9" id="tel" type="tel" name="tel">

バリデートだけならinputにpattern設定するだけでもよいかも