1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

フォームのinputボックスの内容に数字しか入力できないように制限する

Last updated at Posted at 2018-12-13

金額の入力欄を作りまして。
その入力内容をつかって合計値の計算とかしたかったので数字以外が入ると都合が悪い。
なので数字しか入力できないようにしました。

.html
<!-- inputボックスを表示 -->
<input type="tel" id="input_name">

<script type="text/javascript">
  //費用は数値しか入力できない
  $('#input_name').on('input', function() {
    let value = $(this).val();
    $(this).val(value.replace(/[^0-9]+/g, ''));
  });
</script>

.on('input', function { 〜 }でinputボックスの入力内容を監視し、なにか入力されたらを実行する。
実行内容は.replaceで数字以外の文字を削除し、それをinputボックスの値とする、という内容。

正規表現については最初/[^0-9]/と書いていたのですが、その場合は
コピペで入力できるとのご指摘をいただきましたので、
2文字以上コピペしても入力できないように+を付け、
コピペした文字列の途中まで文字が入っていても適用できるように/gを記載しています。
@KeisukeKudo さん、@takaram さんありがとうございました!)

1
1
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?