input type=”number” の代わりにinputmode=”numeric” を使用する

inputで数値入力をする際に使用するtype=”number”の代わりに、inputmode属性でnumericの指定を試してみます。

サンプルコード

まずはtype=”number”の例です。

<form action="./">
  <div>
    <input type="number">
  </div>
  <div>
    <input type="number" class="no-ui">
  </div>
</form>

type=”number”のinputを2つ設置していますが、.no-uiを設定している方はスピンボタン(増減の矢印UI)を表示しないようにしてみます。

.no-ui {
  -moz-appearance:textfield; 
} 
.no-ui::-webkit-outer-spin-button, 
.no-ui::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
} 

type=”number”のデモページ
下記キャプチャの左がiOSで右がAndroidでの入力画面になりますが、日本語や英字ではなく、数値入力をするUIが表示されるようになります。

type=”number”は半角数字を入力する分には問題なさそうですが、全角文字(数字含む)を入力しようとした際に入力できない場合がある点に注意が必要です。
ブラウザによっても挙動が異なるようで、全角数字で「123」と入力すると以下のような挙動になりました。

ブラウザ 挙動
chrome(107.0.5304.110) 入力確定時に値が消える。
edge(107.0.1418.42) 入力確定時に値が消える。
Safari(15.5) 入力できる。
Firefox(106.0.5) 入力できる。
IE フォーカスを外した時に値が消える。

上記と関連して、JavaScriptで入力値を取得する際にも注意が必要になります。
実際に入力値を取得するサンプルを試してみます。

<form action="./">
  <div>
    <input type="number" id="num">
  </div>
  <div id="result"></div>
</form>

inputで入力した値をJavaScriptで取得して、#result部分に出力するようにしてみます。

document.getElementById('num').addEventListener('input', function() {
    console.log(this.value);
    document.getElementById('result').innerHTML = this.value;
}, false);

type=”number”の入力値を取得するデモページ
半角数値のみ入力した場合は意図した通りに動作しますが、前述の例でも試した全角数字の「123」を入力した挙動は以下の通りになります。

ブラウザ 挙動
chrome(107.0.5304.110) 入力値を取得できない。
edge(107.0.1418.42) 入力値を取得できない。
Safari(15.5) 入力値を取得できない。
Firefox(106.0.5) 半角に変換された入力値を取得できる。
「あいう」のような数値でない値の場合は取得できない。
IE 入力値を取得できない。

type=”number”が数値以外の値を除外する機能を内蔵しているようで、数値として正しい値以外を入力した場合、値を取得することができません。
そのため、全角数字だった場合に半角数字に置換や、数値以外が含まれる場合に除外する、などといったJavaScriptの処理を行うこともできません。

type=”number”をtype=”text”にした上で、inputmode=”numeric”を使ってみます。

<form action="./">
  <div>
    <input type="text" id="num" inputmode="numeric">
  </div>
  <div id="result"></div>
</form>

inputmodeを設定することで、ブラウザが適切なキーボードを表示することができます。
inputmode=”numeric”のデモページ
下記キャプチャの左がiOSで右がAndroidになりますが、数値入力をするUIが表示されるようになりました。(ブラウザや端末によって挙動が異なる場合はあります。)

inputmodeは入力値自体に制御をかける機能はないため、全角数字の「123」などそのまま入力できてしまいますが、JavaScriptでの値取得は可能になるので、必要に応じて置換や除外の処理を追加することができるようになります。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年2月
 123
45678910
11121314151617
18192021222324
2526272829