Résumé IA
Souhaitez-vous empêcher les utilisateurs de saisir des espaces dans certains champs de formulaire ? Cela peut être utile pour les noms d'utilisateur, les adresses e-mail ou d'autres champs où les espaces peuvent poser problème.
Ce guide vous montrera comment désactiver la touche d'espace dans des champs de formulaire spécifiques à l'aide d'une classe CSS et d'un simple JavaScript.
Comprendre le besoin
Lors de la création de formulaires qui nécessitent des formats d'entrée spécifiques, tels que des noms d'utilisateur ou des codes, la prévention des espaces peut aider à maintenir l'intégrité des données. Par exemple, dans un formulaire d'inscription d'utilisateur, vous pourriez vouloir des noms d'utilisateur sans espaces pour garantir des identifiants de connexion cohérents.
Configuration de votre formulaire
Tout d'abord, créez votre formulaire et ajoutez les champs dans lesquels vous souhaitez désactiver la touche d'espace. Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter notre guide sur la création de votre premier formulaire.
Pour les besoins de ce tutoriel, nous allons créer un formulaire d'inscription d'utilisateur dans lequel nos visiteurs pourront définir leurs propres noms d'utilisateur. Comme ce sera ce qu'ils utiliseront pour se connecter à notre site, nous ne voulons autoriser aucun espace dans ce champ.
Nous commencerons par ajouter un champ de formulaire de type Texte sur une seule ligne. Une fois ajouté, nous allons ajouter un nom de classe spécifique que nous utiliserons dans notre extrait de code pour déclencher l'exécution du script.
Ajoutez simplement wpf-disable-space au champ Classes CSS dans l'onglet Avancé.
Désactivation de la touche d'espace
Il est maintenant temps d'ajouter l'extrait de code à notre site.
Si vous avez besoin d'aide sur comment et où ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.
event.key dans l'extrait de code suivi des trois signes d'égalité représente une touche spécifique du clavier enfoncée. Pour la barre d'espace, la clé est juste un espace vide.
Maintenant, lorsque l'utilisateur essaie de saisir dans le champ Nom d'utilisateur de notre formulaire, il ne pourra pas saisir d'espace pour le Nom d'utilisateur.
Tout ce que vous avez à faire pour tous les formulaires futurs est d'ajouter le nom de classe CSS spécial au champ Classes CSS dans l'onglet Avancé du champ, tout en étant dans le constructeur de formulaire.
Et voilà ! Vous avez désactivé avec succès la touche d'espace dans votre champ de formulaire ! Ensuite, souhaitez-vous empêcher les caractères spéciaux dans un champ de formulaire ? Consultez notre tutoriel sur Comment restreindre les caractères spéciaux d'un champ de formulaire.