電話フィールドを数字のみ受け付けるように制限する方法

電話フィールドを数字のみ受け付けるように制限しますか？デフォルトでは、国際電話およびスマート電話形式では文字を入力できますが、フィールドからタブアウトすると検証に失敗します。

短いコードスニペットを使用すると、数字以外のキーボード文字の入力を簡単に無効にできます。つまり、数字以外を入力しようとしても、テキストは入力されず、数字が入力されるまでフィールドが無効になります。

フォームの作成

まず、新しいフォームを作成し、フィールドを追加する必要があります。フォームの作成にサポートが必要な場合は、このドキュメントを参照してください。

CSSクラスの追加

次に、電話フォームフィールドにCSSクラスを追加する必要があります。このクラスを持つ電話フィールドが使用されると、数値のみを受け付けます。

CSSクラスを追加するには、フォームに追加した電話フォームフィールドを選択し、詳細設定タブで、CSSクラスにnumbersOnlyを追加します。

電話フィールドを数字のみに制限する

次に、フィールドを数字のみに制限するスニペットをサイトに追加します。

サイトにスニペットを追加する方法についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

/**
 * Restrict the Phone Field to Only Accept Numbers.
 *
 * @link https://wpforms.com/developers/how-to-restrict-phone-field-to-only-accept-numbers/
 */

function restrict_letters_in_phone_field( ) {
?>
	<script type="text/javascript">
		
		jQuery(document).ready(function () {    

			jQuery( '.numbersOnly' ).keypress(function (e) {   
 
				var charCode = (e.which) ? e.which : event.keyCode    
				if (String.fromCharCode(charCode).match(/[^0-9]/g))    
					return false;                        
			});    

		});   
 
	</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'restrict_letters_in_phone_field', 30 );

このスニペットは、numbersOnlyのCSSクラスを持つ任意のフォームフィールドを自動的に検索し、0〜9のキー入力以外の入力を防止します。

これで、電話フィールドを数字のみに制限するために必要なすべてが完了しました！メール通知内の電話番号をリンクにしたいですか？メール通知で電話番号をリンクにする方法のチュートリアルをご覧ください。

参照アクション

wpforms_wp_footer_end

よくある質問

Q: 入力できる桁数を制限するにはどうすればよいですか？

A: 電話フィールドのスマートおよび米国形式では、電話番号の入力桁数に関する検証がすでに組み込まれており、フィールドに桁数が多すぎる場合はフォーム送信が失敗します。