INPUTタグの type=numberで小数を入力できるようにする方法

Development
この記事は約3分で読めます。
  • HTML5のinputを使いたい
  • input type numberで小数点の値を入れたい

HTML5の便利なINPUTタグはtype属性を指定することで入力制限やバリデーションなど便利な機能がブラウザで簡単に利用できます。

以前type=numberの時に表示されてしまう右側の矢印ボタン(スピンボタン)の消し方を紹介しましたが、今回は

小数値を入力できるようにする方法

を書きます。

この記事でわかること
  • input type=numberに小数値を入力可能にする方法
スポンサーリンク

inputタグのtype=numberでは小数は入力できない

HTML5の便利なinputタグですがtype=numberと属性を設定すると数値専用の入力欄にすることが可能です。

これによってアルファベットの入力などは受け付けなくなり、数値のみの入力が反映される便利な入力欄が簡単実装できます。

<input type="number" style="text-align: right;">

正確には値の入力は可能ですが、HTML5のバリデーション機能によってエラーが表示されてしまう状態になります。

inputに小数を入力するにはstepを指定

input type nuberに小数を入力可能にするためには step を指定します。

<input type="number" style="text-align: right;" step="0.1">

こうすることにより、小数点第一位の小数が入力することが可能です。

もっと小数の第二位まで入力したい場合はstep=0.01のように小数点以下の桁数を増やしていけばOKです。

stepを変更しているので、スピンボタンを押した時はstepで指定した値だけ増減されるようになります。

スピンボタンをが必要ない場合は以下のスピンボタンを消す方法をご覧ください。

input type nuberに小数を入力する方法まとめ

便利なHTML5のinputタグの機能ですが、バリデーションなどでちょっと思い通りにいかないことも多いと思います。

ちゃんと使い方や機能を理解すればとても便利な機能ですので、是非使ってみるといいと思います。

input type numberで困ってる誰かの参考になれば嬉しいです。

まとめ
  • input type nuberに小数を入力したい場合は、stepを指定すればOK

コメント

タイトルとURLをコピーしました