### [電話フィールドを数字のみを受け付けるように制限する方法](https://wpforms.com/developers/how-to-restrict-phone-field-to-only-accept-numbers/) **公開日:** 2021年8月12日 **著者:** エディトリアルチーム **抜粋:** このチュートリアルでは、簡単なスクリプトを使用して電話フィールドを数字のみを受け付けるように制限する方法を説明します。 **コンテンツ:** **電話**フィールドを数字のみを受け付けるように制限したいと思いますか？デフォルトでは、**国際**および**スマート**電話形式では文字を入力できますが、フィールドからタブアウトすると検証に失敗します。  簡単なコードスニペットを使用すると、数字以外のキーボード文字の入力を簡単に無効にできます。つまり、数字以外のものを入力しようとしても、テキストは入力されず、数字が入力されるまでフィールドが無効になります。 ## フォームの作成 まず、新しいフォームを作成してフィールドを追加する必要があります。フォームの作成についてサポートが必要な場合は、[こちらのドキュメントをご覧ください](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成方法")。  ## CSSクラスの追加 次に、**電話**フォームフィールドにCSSクラスを追加する必要があります。このクラスを持つ**電話**フィールドが使用されると、数値のみを受け付けます。 このCSSクラスをCSSクラスを受け付ける任意のフォームフィールドに追加することで、そのフィールドが数値のみを受け付けるように制限できます。 CSSクラスを追加するには、フォームに追加した電話フォームフィールドを選択し、**高度な設定**タブで、**CSSクラス**に**numbersOnly**を追加します。  ## 電話フィールドを数字のみに制限する 次に、フィールドを数字のみに制限するスニペットをサイトに追加します。 スニペットをサイトに追加する方法については、[こちらのチュートリアルをご覧ください](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "WPFormsにカスタムPHPまたはJavaScriptを追加する方法")。 ``` /** * 電話フィールドを数字のみを受け付けるように制限します。 * * @link https://wpforms.com/developers/how-to-restrict-phone-field-to-only-accept-numbers/ */ function restrict_letters_in_phone_field( ) { ?> **カテゴリ:** フィールド **タグ:** Javascript ---