HTML での数値入力のみを許可する

1. HTML での数値入力のみを許可するには、input タグで type="number"を使用する
2. HTML での数値入力のみを許可するように、JavaScript でクライアント側の検証を記述する

この記事では、HTML のテキスト入力フィールドに数値入力のみを許可するいくつかの方法を紹介します。

HTML での数値入力のみを許可するには、input タグで type="number"を使用する

HTML では、input タグを使用してユーザーからの入力を取得します。

input タグの type 属性で入力タイプを指定できます。input タグは、テキスト、数字、パスワード、電子メールなどのさまざまな入力タイプを受け入れます。

type 属性を使用して、HTML での数値入力のみを許可できます。たとえば、type 属性を number として input タグを作成します。

次に、送信ボタンを作成します。数字ではなく文字を入力した場合、フォームは送信されません。

ただし、ブラウザによって動作が異なります。

Firefox では、以下の例では入力領域への入力が許可されています。ただし、ボタンをクリックしたときに値を送信することはできません。

Chrome の場合、数字以外の文字を入力することはできません。Firefox では他の入力を貼り付けることができますが、Chrome ではできません。

たとえば、ランダムなテキストをコピーして Firefox の入力領域に貼り付けると、テキストは貼り付けられますが、Chrome ではこれは行われません。この動作は、コンテンツをテキスト領域にドラッグアンドドロップする場合にも同じです。

したがって、検証を追加するために、テキスト領域でのドラッグアンドドロップアンドペースト操作を無効にすることができます。例えば、input タグに ondrop と onpaste の属性を記述し、その値として return false; を記述します。

これにより、テキスト領域でのコピー＆ペーストおよびドラッグアンドドロップ機能が無効になります。

サンプルコード：

 <form action="">
 <input type="number" ondrop="return false;" onpaste="return false;" />
 <button type="submit" value="Submit">Click</button>
 </form>

HTML での数値入力のみを許可するように、JavaScript でクライアント側の検証を記述する

上記の方法はすべてのブラウザで完全に機能するわけではありませんが、テキスト領域に数値のみを入力できるように、クライアント側の検証を追加する必要があります。そのためには、JavaScript を作成する必要があります。

値 0-9 からの入力のみを受け入れることができるような検証を追加する必要があります。そのために、JavaScript でイベント onkeypress があります。

onkeypress イベントは、ユーザーがキーを押すと実行されます。onkeypress イベントでは、0-9 の間の値のみを返すことができます。

charCode プロパティを使用して、押された入力の文字コードを取得できます。

たとえば、onkeypress イベントを input タグの属性として記述します。

次の例に示すように、属性内で、&&演算子を使用してステートメント event.charCode>=48 および event.charCode<=57 を返します。次に、input タグの最後に required 属性を書き込みます。

以下の例では、48 と 57 はそれぞれ 0 と 9 の Unicode 文字コードです。JavaScript は 0-9 からの値のみを返します。

これは、onkeypress イベントを charCode プロパティと一緒に使用して、HTML での数値入力のみを許可する方法です。

サンプルコード：

<form>
<input type="number" ondrop="return false;" onpaste="return false;"
onkeypress="return event.charCode>=48 && event.charCode<=57" required/>
<button type="submit" value="Submit">Click</button>
</form>