スポンサーリンク
はじめに
フォームで電話番号を入力する欄に、番号とハイフンだけを入力させたい時などありませんか?
実際に案件で使用したコードを解説いたします。
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にひらがなとスペースだけ入力できるようにするフォームで名前のふりがなを入力する欄に、ひらがなとスペースだけを入力させたい時などありませんか?
実際に案件で使用したコードを解説いたします。...
スポンサーリンク
スポンサーリンク