勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  HTML

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を入力すると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"に変えるというのも難しいところ。そのようなケースの場合は今回の方法で対応する。

 - HTML

  関連記事

HTML内に動画(mp4ファイル)を埋め込んで配信する方法

Webページ内にYoutubeとかを用いずに動画(mp4)ファイルを配信したいと ...

htmlのarticle

コーダーさんから渡されたソースに<article>という 記述があり ...

フォームのresetについて

<input type="reset">についてクリックしたら 初期 ...

HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報を取得しGoogleMapAPIでその場所を反映させたかっ ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...