More than 5 years have passed since last update.

数字のみを入力できるフォーム(テキストボックス)を作成する

Last updated at 2018-09-08Posted at 2018-04-22

はじめに

「フォームに数字のみを入力する」のは結構よくあるケースであり、検索すれば豊富な情報が出る話題です。

ただ、それぞれの情報を検証してみると、情報が当時のままであったり、案外不便・デメリットが出てきたため、
「自分なりに一度まとめてみよう」と思った次第です。

なお、動作環境はchrome 65,　iPhone 5Sです。

inputのtypeはnumberかtelか

sample.html

<input type="number" name="sample" id="sample1"/>
<input type="tel" name="sample" id="sample2"/>

HTML5で追加された input[type=number] を使う上での注意

上記サイトでも言及されていますが、numberだと不便な点が発生します。
それは、numberだと数字以外の文字も入力できる上に、Javascriptでその値を取得できないという点です。
値を取得できないということは、対応処理も行うことができないということになります。
(追記：)一方telも数字以外の文字も入力できますが、Javascriptでその値を取得できるという点で異なっています。
後述するようなキー入力に対するイベント処理もtelのみ適応できます。

iphoneでnumberのキーパッドは入力しにくい

スマホで数字入力のキーボードを表示させる場合、inputのtypeはnumberかtelになります。
また、iphoneの場合、numberとtelではキーパッドの種類が異なります。

numberの場合
telの場合

numberの場合、半角数字に加え、全角の記号を入力するような構成になっています。
連続して同じ数字を入力する場合が特に不便です。
例えば「1・1」と入力すると、全角の記号が出るため、
「1・→・1」と2文字に対して3キーの入力操作を行わなければなりません。

特定の桁を入力させる場合はtelのmaxlengthが便利

telの場合は、入力桁数を制限するmaxlengthを使用することが可能です。
これにより、javascript・Jquery側でわざわざ桁数制限の処理を行わずに済むため、
コードがシンプルになるというメリットがあります。

inputはtelの使用がメリットが大きい

以上から、htmlレベルの数字入力処理はinputでtelを使うと事がスムーズになります。

javascript側の数字入力の処理

「数字しかフォームに入力させない」ロジックも様々なものが組まれています。
いくつか試してみました。

拾うイベントはinput、keydown、keyup、keypressのどれがいいのか

jQueryでinputに半角数字のみ入力を許可する

inputイベントで処理する形式です。正常に動作しました。

keydownイベントで処理する形式です。
chromeで閲覧すると、SHIFT+1(!を入力)など、シフトキーを押しながら数字キーを押した処理に対応できないことがわかります。

-[JS] 数値のみ入力可能なコントロール

keyupで対処する形式です。
正常に動作しますが、シフトキーを押しながら数字キーを押す文字はチラツキが見られます

-[jQuery] 数字しか入力できないInput
サイトのサンプルでは正常に動作しませんでしたが、少し修正すれば動いたので、そのコードを後で記載します。

コードサンプル

結果として以下のコードが自分には使いやすく感じました。
サンプルは株式銘柄コード(数字4桁)を入力するものです。

sample.html

<body>
…
<input type="tel" name="sample" id="form-ticker-symbol" maxlength="4"/>
…
</body>

sample.html

<script type="text/javascript">
$('#form-ticker-symbol').on("keypress", function(event){return leaveOnlyNumber(event);});

function leaveOnlyNumber(e){
  // 数字以外の不要な文字を削除
  var st = String.fromCharCode(e.which);
  if ("0123456789".indexOf(st,0) < 0) { return false; }
  return true;  
}
</script>

その他のメジャーな方法

上記は数値入力のみで、それほどフォームの数が多くないサイトでは有効かもしれません、
しかし、様々なフォームを作成し、その入力制限をかけたい場合、
フォームそれぞれに対してコードを一から作成し、それぞれに対して有効性を検証するのは非効率的になってしまいます。

その場合、jQueryプラグインやPHPのフレームワークの機能を使い、
入力チェック(Validation)機能作成を効率的に行うのが良いでしょう。
- 超簡単！フォームをリアルタイムで入力チェックする：jQuery-Validation-Engine
- Laravelでバリデーション

今回は、「手作り」感を楽しむ・「PCとiPhone両面で動作確認する」・「入力チェックの機能の一側面」を観察する目的もありました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up