数字のみ入力できるinputを作る2つの方法

2022 2/22

2022年2月22日

この記事では数字のみを入力できるinput作る方法をサンプルコード付きでご紹介します。
javascriptは使用しません。

数字のみ入力できる入力項目の作り方は

type属性を使って数字のみ入力
pattern属性を使って数字のみ入力

です。

これらの方法のサンプルコードのデモは次の通りです。

この記事を参考にして入力制限する場合は次のことに注意する必要があります。

HTMLやjavascriptで数字の入力制御ができてUXがよくなりますが、デバグツールなどを使うと簡単に制御をくぐり抜けることができます。

送信された入力値が正しい数字であるかサーバー側で検証する必要があります。

type属性を使って数字のみ入力

1つ目の方法はinputのtype属性をnumberに指定することによって入力を数字のみに制御する方法です。

<form>
  <input type="number" />
  <input type="submit" />
</form>

上記のサンプルコードのようにすることで次のメリットがあります。

スマホで数字入力のキーボードが表示される
数字以外の入力ができない
スピンボタンで入力できる

デメリットは次のとおりです。

ブラウザによって挙動が異なる（SafariやFirefoxではアルファベットや全角数字が入力可能など）
pattern属性との併用ができない
マイナスの数字を入力できてしまう
maxlenghtで桁数を制御できない

デメリットについてはこちらの記事で詳しく解説しています。

type属性をnumberのときに使える属性は次のとおりです。

属性	説明
list	datalistで指定した任意の値を自動補完にする
max	入力できる最大の数字
min	入力できる最小の数字
placeholder	入力欄が空のときに表示する文字列（数字以外も可能）
readonly	読み取り専用の値。値の変更や削除は不可。
step	入力できる数字の間隔を指定

これらの属性を用いて細かく入力制限することができます。

入力可能な数字の制御

type属性がnumberのときの入力可能な数字の制御のサンプルコードは次のとおりです。

<form>
  <input
    type="number"
    max="1000"
    min="10"
    step="20"
    placeholder="10以上1000以下の数字を入力"
  />
  <input type="submit" />
</form>

このサンプルコードでは

1000以下の数字
10以上の数字
入力できる数字の間隔は20。10, 30, 50, …, 980, 1000が入力可能
入力項目がからの場合は「10以上1000以下の数字を入力」と案内する

となるように制御をしています。

max属性を999にすることで入力できる数字を3桁までに制御することもできます。

少数の入力を制御

type属性でnumberを指定したときに少数の入力を制御する場合は次のコードのようにstep属性を用います。

<form>
  <input
    type="number"
    step="0.1"
  />
  <input type="submit" />
</form>

スピンボックスを非表示にする

type属性をnumberにすると入力項目の右端にスピンボックス（上下のボタン）が表示されます。

サイトのデザインによってはこのスピンボックスを非表示にする必要がありますが、スピンボックスは次のCSSで非表示にすることができます。

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

pattern属性を使って数字のみ入力

2つ目の方法はinputのpattern属性で入力を許可したい数字を正規表現で指定して制御する方法です。

数字のみ許可したい場合は次のサンプルコードの通りに記述します。

<form>
  <input
    type="text"
    pattern="^[0-9]+$"
  />
  <input type="submit" />
</form>

上記のサンプルコードのように正規表現で数字入力を制御する方法では次のメリットがあります。

自然数や整数など数字の入力を細かく制御できる

デメリットは次のとおりです。

type属性をnumberにするとpattern属性で指定した制御が効かなくなる
フォーム送信時に検証される（文字などを入力できてしまう）
スマホではテキストキーボードが開く

正規表現を使った多用な数字入力の制御方法をご紹介します。

自然数のみ許可

自然数のみ許可したい場合は正規表現で^[1-9][0-9]*$と指定します。

<form>
  <input
    type="text"
    pattern="^[1-9][0-9]*$"
  />
  <input type="submit" />
</form>

入力数字の先頭に0を入力することはできません。

個数
順番
金額

などを入力するときに使用できます。

整数のみ許可

整数のみ許可したい場合は正規表現で^[+-]?([1-9][0-9]*|0)$と指定します。

<form>
  <input
    type="text"
    pattern="^[+-]?([1-9][0-9]*|0)$"
  />
  <input type="submit" />
</form>

0やプラスの数字やマイナスの数字を入力できます。

桁数を指定

数字の桁数を1桁から9桁まで許可したい場合は正規表現で^[0-9]{1,9}$と指定します。
また、9桁以上のみ許可したい場合は^[0-9]{9,}$と指定します。

<form>
  <!-- 数字は9桁まで -->
  <input
    type="text"
    pattern="^[0-9]{1,9}$"
  />

　<!-- 数字は9桁以上 -->
  <input
    type="text"
    pattern="^[0-9]{9,}$"
  />
  <input type="submit" />
</form>

少数点を含む数字のみに制御

pattern属性を^([1-9]\d*|0)(.\d+)?$にすることで小数点を含む数字のみに入力を制御することができます。

<form>
  <input
    type="text"
    pattern="^([1-9]\d*|0)(\.\d+)?$"
  />
  <input type="submit" />
</form>

ハイフンを含む数字のみに制御

pattern属性を^[0-9-]+$にすることでハイフンを含む数字のみに入力を制御することができます。

<form>
  <input
    type="text"
    pattern="^[0-9-]+$"
  />
  <input type="submit" />
</form>

この入力項目には数字とハイフンを入力することができるので

電話番号
郵便番号

などの用途で使用することができます。

まとめ

この記事では次の方法を使って数字のみ入力できるinputの入力欄の作り方をサンプルコードを使って紹介しました。

type属性を使って数字のみ入力
pattern属性を使って数字のみ入力

これらの方法のサンプルコードのデモは次の通りです。

入力欄を数字のみに制御する方法はProgateなどで無料で学べますが、この記事で紹介したような制御する方法のほとんどはProgateでは学べません。

しかし、WEB制作の現場ではこれらの方法も知っておかないと要望や仕様通りにコーディングできません。

そこでおすすめなのが

プログラミングスクール
書籍

です。
プログラミングスクールや書籍で学ぶと効率よく学べます。

なぜなら、プログラミングスクールや書籍では「稼ぐ」ために学ぶからです。

プログラミングスクールは最も効率よく学習できます。
受講料金はかかりますが、エンジニアとしての収入を得るとすぐに元は取れます。

WEB制作の現場でも使えるコードを効率的に学べるようにおすすめの書籍をまとめておきます。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

created by Rinker

¥2,486 (2022/05/17 13:22:55時点楽天市場調べ-詳細)

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内直人 ]

created by Rinker

¥2,420 (2022/05/17 13:22:55時点楽天市場調べ-詳細)

稼げるエンジニアになるために

プログラミングスクール
書籍

を活用して効率よく学びましょう！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

エンジニアを目指す方必見！おすすめプログラミングスクール

最短でエンジニアになるには、いかに効率よく学習するかが重要です。モチベーションを維持しながら最短でエンジニアを目指すならプログラミングスクールを利用するのもおすすめです。