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

上記と関連して、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”の入力値を取得するデモページ
半角数値のみ入力した場合は意図した通りに動作しますが、前述の例でも試した全角数字の「１２３」を入力した挙動は以下の通りになります。

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