### [フォーム入力欄内でスペースキーを無効にする方法](https://wpforms.com/developers/how-to-disable-the-space-key-inside-a-form-field/) **公開日:** 2022年3月29日 **著者：** Umair Majeed **概要：** このチュートリアルでは、CSSクラス名と簡単なJavaScriptスニペットを使用して、任意のフォームフィールドでスペースキーを簡単に無効にする方法について解説します。 **内容：** 特定のフォームフィールドでユーザーがスペースを入力できないようにしたいとお考えですか？これは、ユーザー名やメールアドレス、あるいはスペースが入力されると問題が生じる可能性のあるその他のフィールドで役立ちます。 このガイドでは、CSSクラスと簡単なJavaScriptを使用して、特定のフォームフィールドでスペースキーを無効にする方法をご紹介します。 ## 必要性の理解 ユーザー名やコードなど、特定の入力形式が求められるフォームを作成する場合、スペースの入力防止はデータの整合性を保つのに役立ちます。例えば、ユーザー登録フォームでは、ログイン情報の統一性を確保するために、スペースを含まないユーザー名を要求したい場合があります。 ## フォームの設定 まず、フォームを作成し、スペースキーを無効にしたいフィールドを追加します。フォームの作成方法については、[初めてのフォーム作成ガイド](https://wpforms.com/docs/creating-first-form/)をご覧ください。 このチュートリアルの目的として、訪問者が独自のユーザー名を設定できるユーザー登録フォームを作成します。これはサイトへのログインに使用されるため、このフィールドではスペースを一切許可しないようにします。 まず、**単一行テキスト**フォームフィールドを追加します。追加後、スニペット内でスクリプトの実行をトリガーするために使用する特定のクラス名を設定します。 **詳細**タブの**CSSクラス**フィールドに、`wpf-disable-space`を追加するだけです。 ![[詳細]タブの**CSSクラス**フィールドに、CSSクラス「wpf-disable-space」を追加してください。](https://wpforms.com/wp-content/uploads/2022/03/wpforms-css-classname-advanced-tab.jpg)## スペースキーの無効化 それでは、スニペットをサイトに追加しましょう。 サイトへのスニペットの追加方法や追加場所についてサポートが必要な場合は、[こちらのチュートリアル](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms")をご確認ください。 スニペット内の `event.key` の後に続く3つの等号は、押された特定のキーボードキーを表します。スペースキーの場合、キーは単に空白です。 その他の特殊な数値表現の完全なリストについては、[こちらの記事](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values "Mozilla Documentation on Key Values")をご確認ください。 これで、ユーザーがフォームの**ユーザー名**フィールドに入力しようとしても、**ユーザー名**としてスペースを入力することはできなくなります。 今後作成するすべてのフォームで必要な作業は、フォームビルダー内で、フィールドの**詳細**タブにある**CSSクラス**フィールドに、この特別なCSSクラス名を追加するだけです。 これで完了です！ これで、フォームフィールド内でのスペースキーの入力を無効化することに成功しました！次に、フォームフィールド内での特殊文字の入力を制限したいですか？[フォームフィールドでの特殊文字の制限方法](https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/ "フォームフィールドでの特殊文字の制限方法")に関するチュートリアルをご覧ください。 ## アクションの参照 [wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "wpforms_wp_footer_end アクションの使用") **カテゴリ:** フィールド **タグ:** Javascript, JS ---