### [Comment désactiver la touche Espace dans un champ de formulaire](https://wpforms.com/developers/how-to-disable-the-space-key-inside-a-form-field/)

**Publié le :** 29 mars 2022
**Auteur :** Umair Majeed

**Extrait :** Ce tutoriel vous explique comment désactiver facilement la touche Espace dans n'importe quel champ de formulaire à l'aide d'un nom de classe CSS et d'un petit bout de code JavaScript. 

**Contenu :**

Souhaitez-vous empêcher les utilisateurs d'entrer des espaces dans certains champs de formulaire ? Cela peut s'avérer utile pour les noms d'utilisateur, les adresses e-mail ou d'autres champs où les espaces pourraient poser problème.

Ce guide vous montrera comment désactiver la touche espace dans des champs de formulaire spécifiques à l'aide d'une classe CSS et d'un simple bout de code JavaScript.

## Comprendre le besoin

Lors de la création de formulaires nécessitant des formats de saisie spécifiques, comme les noms d'utilisateur ou les codes, empêcher l'utilisation d'espaces peut aider à préserver l'intégrité des données. Par exemple, dans un formulaire d'inscription d'utilisateur, vous pourriez vouloir des noms d'utilisateur sans espaces afin de garantir la cohérence des identifiants de connexion.

## Configurer votre formulaire

Commencez par créer votre formulaire et ajoutez les champs dans lesquels vous souhaitez désactiver la touche espace. Si vous avez besoin d’aide pour créer un formulaire, veuillez consulter notre guide sur la [création de votre premier formulaire](https://wpforms.com/docs/creating-first-form/).

Dans le cadre de ce tutoriel, nous allons créer un formulaire d'inscription utilisateur dans lequel nos visiteurs pourront définir leur propre nom d'utilisateur. Comme c'est ce qu'ils utiliseront pour se connecter à notre site, nous ne voulons autoriser aucun espace dans ce champ.

Nous allons commencer par ajouter un champ de formulaire **Texte sur une seule ligne**. Une fois celui-ci ajouté, nous allons lui attribuer un nom de classe spécifique que nous utiliserons dans notre snippet pour déclencher l'exécution du script.

Il suffit d'ajouter `wpf-disable-space` au champ **Classes CSS** de l'onglet **Avancé**.

![Il suffit d'ajouter la classe CSS wpf-disable-space au champ **Classes CSS** de l'onglet **Avancé**.](https://wpforms.com/wp-content/uploads/2022/03/wpforms-css-classname-advanced-tab.jpg)## Désactiver la touche Espace

Il est maintenant temps d'ajouter l'extrait de code à notre site.

Si vous avez besoin d'aide pour savoir comment et où ajouter des extraits de code à votre site, [consultez ce tutoriel](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ « Comment ajouter du code PHP ou JavaScript personnalisé pour WPForms »).

Le `event.key` dans le snippet, suivi de trois signes égal, représente une touche spécifique du clavier qui a été enfoncée. Pour la barre d'espace, la touche correspond simplement à un espace vide.

Si vous souhaitez obtenir la liste complète des autres représentations numériques spéciales, [consultez cet article](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values « Documentation Mozilla sur les valeurs de touche »).

Désormais, lorsque l'utilisateur tentera de remplir le champ **Nom d'utilisateur** de notre formulaire, il ne pourra pas saisir d'espace dans le champ **Nom d'utilisateur**.

Pour tous vos futurs formulaires, il vous suffit d'ajouter le nom de la classe CSS spéciale au champ **Classes CSS** dans l'onglet **Avancé** du champ, depuis le générateur de formulaires.

Et voilà ! Vous avez réussi à désactiver la touche espace dans votre champ de formulaire ! Ensuite, souhaitez-vous empêcher l’utilisation de caractères spéciaux dans un champ de formulaire ? Consultez notre tutoriel sur [Comment restreindre les caractères spéciaux dans un champ de formulaire](https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/ « Comment restreindre les caractères spéciaux dans un champ de formulaire »).

## Action de référence

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Utilisation de l'action wpforms_wp_footer_end")

**Catégories :** Champs

**Mots-clés :** Javascript, JS

---