JS

[フォーム] 数字とハイフンだけ入力したい

はじめに

フォームで電話番号を入力する欄に、番号とハイフンだけを入力させたい時などありませんか?

実際に案件で使用したコードを解説いたします。

HTML

<dl class="form-group">
  <dt>電話番号</dt>
  <dd class="your-tel">
    <input type="tel" name="your-tel" size="15" placeholder="例)090-1234-5678" required>
  </dd>
</dl>

jQuery

$(function() {
    $('input[type="tel"]').on("keypress input", function(){
      let str = $(this).val();
      $(this).val(str.replace(/[^0-9\-]/g, ""));
    });
});

解説

let str = $(this).val();

で入力した内容を取得し、
replace を使用して、

/[^0-9-]/g

の正規表現に合致したもの以外を削除します。

keypress でキーボードを押した時、
input でスマホやタブレットなどのタッチデバイスで入力した時にコードが実行されます。

下の記事も是非お試しください!

[フォーム] jQueryでinputにひらがなとスペースだけ入力できるようにするフォームで名前のふりがなを入力する欄に、ひらがなとスペースだけを入力させたい時などありませんか? 実際に案件で使用したコードを解説いたします。...

おすすめ書籍

1冊ですべて身につくWordPress入門講座 [ Mana ]

価格:2,200円
(2022/10/12 21:45時点)
感想(2件)

動くWebデザインアイディア帳 [ 久保田涼子 ]

価格:3,080円
(2022/10/12 21:45時点)
感想(8件)

動くWebデザインアイディア帳 実践編 [ 久保田 涼子 ]

価格:2,860円
(2022/10/12 21:46時点)
感想(3件)