JavaScript サンプル: <input type="number"> を使わずに、入力できる値を半角数字のみにする

<input type="number"> ではない入力欄でも、半角数値のみ入力できるようにします。

• class="input-numeric" がある入力欄に対して下記の処理を行います。
  • 全角数字を入力・貼り付けされたときは半角数字に変換します。
  • 数字以外の入力・貼り付けがあったときは文字を除去します。
• <input type="number"> とは下記が異なります。
  • スピンボタンは CSS で調整しなくても表示されないため、番号入力などの入力欄に向いています。
  • maxlength は何もしなくてもそのまま使用できます。
• keypress イベントは非推奨になっているため、input と compositionend イベントを使用しています。

例

比較