<input type="text">で数値だけ入力できるようにしたい。

HTML

<input type=”number”>で数値のみの入力にはできるが、JavaScriptのonChangeイベントなどで自動計算させたいときに、入力欄右端に表示される上下矢印(▲▼)を使用して数値を増減した場合にJSが動かなかった。
この上下矢印はブラウザの機能で「スピンボタン」と言うらしい。
(ちなみに、スピンボタンを使用せずに数値を入力したときは、JSは正常に動く)

number以外で数値のみ入力にできないかと探したところ下記のサイトで良い方法を見つけた。

要は下記の様にコードを表記すれば良いとの事。

<input type="text" maxlength="5" oninput="value = value.replace(/[^0-9]+/i,'');" />

対象の<input type=”number”>を上記のコードに変更したところ、数値以外入力できなくなり問題なくJSが作動するようになった。

後に気づいたのだが、type=”number” にしたときのスピンボタンはCSSで消すことができるらしい。
実はそっちでやったほうが楽だったかもしれないのだが、それはまたの機会に試すことにする。

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