input type="number"がFirefoxやSafariで正常に動作しない

input type="number"を設置したFormがFirefoxやiPhone Safariで正常に動作しなかった。具体的には文字が入力できてしまったり、文字入力後にバリデートしようとすると空判定になる。input type="text"に変えられない事情があったためinput type="number"のままで対応する方法のメモ。

具体的な症状

以下のようなソースコードがあったとする。

<input type="number" id="test_number">
<button type="button" id="test_button">test button</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#test_button').on('click', function(){
        console.log($('#test_number').val());
    });
});
</script>

問題点は以下の通り。

1. 数値以外の文字が入力できてしまう。また、文字入力後ボタンを押した際に<empty string>が返る
2. 全角数値も通してしまう。また、文字入力後ボタンを押した際に半角数値が返る(１０を入力すると10が返る)

1の方が難儀で未入力チェックが難しくなる。これがChromeだと数値以外は入力できなかったり、全角数値を入力すると自動で半角数値に書き換えてくれる。

対応方法

<input type="number" step="1" min="1" max="100" pattern="[0-9]*" oninput="this.value = this.value.replace(/[^0-9]/g, '');">

pattern属性とoninputイベントで半角数値のみ入力できるように制御する。

所感

input type="number"は他にも問題があるようで基本的に使わない方が無難な気がする。

とはいえinput type="number"のままでデザイン済みのコーディングデータをいただいているような場合、勝手にinput type="text"に変えるというのも難しいところ。そのようなケースの場合は今回の方法で対応する。