Inputフィールドに施したカンマ処理がIOS各種ブラウザで異常挙動になる

皆様いつもお世話になっております。

input type="text"フィールドへconvertNumberToLocaleStringクラスを振って、
下記スクリプトで当該クラス要素を、lodashライブラリのmap関数でループさせて、カンマ処理inputイベントハンドラを設定＆即時ディスパッチさせており、
PC上のCHROMEやsafariからのアクセスでは正常に機能しているのですが、表題の通りiOSのCHROMEやsafari等では異常挙動となってしまいます。
例：11と入力すると111になる。さらに1を入力すると、111,111になる等

HTMLは他と干渉無し、jsライブラリインクルード等は無い状態で動作するjsfiddleのリンクを追記させて頂きます。
jsfiddle

iOSのCHROMEやsafari等ではinputイベントの発火タイミングが違うようにも思えるのですが、どなたか御教示頂けると幸いです。
宜しくお願い致します。

※ソースも修正しました

javascript
1var elms = document.getElementsByClassName('convertNumberToLocaleString');
2for(var i = 0; i < elms.length; i++){
3  elms[i].addEventListener('input', function (event) {
4    let value = event.target.value.replace(/[^0-9]/g,'');
5    event.target.value = (value === '' ? '' : Number(value).toLocaleString('ja-JP'));
6  });
7  elms[i].dispatchEvent(new Event('input'));
8}

HTML
1<input type="text" value class="convertNumberToLocaleString" />

退会済みユーザー

2021/05/12 06:16

その前に、HTMLの文法周りはwebブラウザが誤解しない程度に万全なのでしょうか。組み合わせているjsライブラリの類は把握済みでしょうか。

wonda

2021/05/12 06:37

回答ありがとうございます。 HTMLは他と干渉無し、jsライブラリインクルード等は無い状態で動作するjsfiddleを追記させて頂きます。 https://jsfiddle.net/y0d81nh6/2/

yuki84web

2021/05/12 11:40

input でないと駄目ですか？例えばonchangeなど

wonda

2021/05/12 12:53

回答ありがとうございます。 inputイベントにこだわる理由は、文字の追記・削除毎にリアルタイムでカンマ処理されるためです。ただ、changeイベントに変更してフォーカスが外れた際に処理が走るようにした場合は正常に変換されるので、落とし所としてはこれで良いのかなと思っています。

yuki84web

2021/05/13 11:56

なるほど、ではonKeyUpでいかがでしょうか。

wonda

2021/05/14 08:26

keyupイベントに変更して試してみましたが、inputイベントと同様の結果になりました。どうやらiOSの日本語キーボード上の数字キーボードがダメみたいで、下のグローブアイコンから横長の英字キーボードにして数字を入力すると、問題なく動作しました。

yuki84web

2021/05/14 11:46

求める回答と異なると思いますが、input type="tel"にして最初から数字キーボードで入力してもらうとか？

wonda

2021/05/14 14:00

ありがとうございます！まだ様々なブラウザで検証は必要ですが、期待する挙動の可能性が高いかもしれません。元々input type="number"でも試していて、この場合は半角数字のみ入力可能な状態になり、期待する挙動なのですが、カンマが反映されなかったので。。ある程度のブラウザで検証して問題なさそうなら、解決済みとさせて頂きますので、今暫くお待ちください。ありがとうございました。