この記事では数字のみを入力できる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制作の現場でも使えるコードを効率的に学べるようにおすすめの書籍をまとめておきます。
稼げるエンジニアになるために
- プログラミングスクール
- 書籍
を活用して効率よく学びましょう!