フォームフィールド内のスペースキーを無効にする方法

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

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

ニーズを理解する

ユーザ名やコードのような特定の入力書式を必要とするフォームを作成する場合、スペースを入れないようにすることでデータの整合性を保つことができます。例えば、ユーザー登録フォームでは、一貫したログイン認証情報を保証するために、空白のないユーザー名が必要かもしれません。

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

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

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

を加えるだけだ。 wpf-disable-space に対する CSSクラス フィールドの上級タブ

さて、いよいよスニペットをサイトに追加しよう。

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

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

その他の特殊な数値表現の完全なリストをご希望の方は、こちらの記事をご覧ください。

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

フォームビルダーの詳細設定タブにあるCSS クラスフィールドに特別な CSS クラス名を追加するだけです。

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