How to Disable the Space Key Inside a Form Field

特定のフォームフィールドでユーザーがスペースを入力できないようにしますか？これは、スペースが問題を引き起こす可能性のあるユーザー名、メールアドレス、その他のフィールドに役立ちます。

このガイドでは、CSSクラスと簡単なJavaScriptを使用して、特定のフォームフィールドでスペースキーを無効にする方法を説明します。

必要性の理解

ユーザー名やコードなど、特定の入力形式を必要とするフォームを作成する場合、スペースを防止することでデータの整合性を維持できます。たとえば、ユーザー登録フォームでは、一貫したログイン資格情報を確保するために、スペースのないユーザー名を必要とする場合があります。

まず、フォームを作成し、スペースキーを無効にしたいフィールドを追加します。フォームの作成にヘルプが必要な場合は、最初のフォームの作成に関するガイドを参照してください。

このチュートリアルの目的のために、訪問者が独自のユーザー名を設定できるユーザー登録フォームを作成します。これはサイトへのログインに使用されるため、このフィールドにスペースを許可したくありません。

まず、単一行テキストフォームフィールドを追加します。追加したら、スクリプトを実行するようにトリガーするためにスニペットで使用する特定のクラス名を追加します。

高度なタブのCSSクラスフィールドにwpf-disable-spaceを追加するだけです。

次に、スニペットをサイトに追加します。

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

スニペットのevent.keyと3つの等号は、押された特定のキーボードキーを表します。スペースバーの場合、キーは単なる空のスペースです。

他の特殊な数値表現の完全なリストが必要な場合は、この記事をご覧ください。

これで、ユーザーがフォームのユーザー名フィールドに入力しようとすると、ユーザー名にスペースを入力できなくなります。

今後のすべてのフォームで必要なのは、フォームビルダー内で、[高度な]タブの[CSSクラス]フィールドに特別なCSSクラス名を追加することだけです。

これで完了です！フォームフィールド内でスペースキーを正常に無効にしました！次に、フォームフィールドに特殊文字を入力できないようにしますか？[フォームフィールドから特殊文字を制限する方法]のチュートリアルをご覧ください。