### [So deaktivieren Sie die Leertaste in einem Formularfeld](https://wpforms.com/developers/how-to-disable-the-space-key-inside-a-form-field/)

**Veröffentlicht:** 29. März 2022
**Autor:** Umair Majeed

**Auszug:** In diesem Tutorial erfahren Sie, wie Sie die Leertaste in jedem Formularfeld mithilfe eines CSS-Klassennamens und eines kleinen JavaScript-Schnipsels ganz einfach deaktivieren können. 

**Inhalt:**

Möchten Sie verhindern, dass Benutzer in bestimmten Formularfeldern Leerzeichen eingeben? Dies kann bei Benutzernamen, E-Mail-Adressen oder anderen Feldern nützlich sein, in denen Leerzeichen zu Problemen führen können.

Dieser Leitfaden zeigt Ihnen, wie Sie die Leertaste in bestimmten Formularfeldern mithilfe einer CSS-Klasse und einfachem JavaScript deaktivieren können.

## Die Notwendigkeit verstehen

Beim Erstellen von Formularen, die bestimmte Eingabeformate erfordern, wie Benutzernamen oder Codes, kann das Verhindern von Leerzeichen dazu beitragen, die Datenintegrität zu wahren. In einem Benutzerregistrierungsformular möchten Sie beispielsweise möglicherweise Benutzernamen ohne Leerzeichen, um konsistente Anmeldedaten zu gewährleisten.

## Einrichten Ihres Formulars

Erstellen Sie zunächst Ihr Formular und fügen Sie die Felder hinzu, in denen Sie die Leertaste deaktivieren möchten. Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, lesen Sie bitte unsere Anleitung zum [Erstellen Ihres ersten Formulars](https://wpforms.com/docs/creating-first-form/).

Für die Zwecke dieses Tutorials erstellen wir ein Benutzerregistrierungsformular, in dem unsere Besucher ihre eigenen Benutzernamen festlegen können. Da sie diesen zur Anmeldung auf unserer Website verwenden, möchten wir in diesem Feld keine Leerzeichen zulassen.

Wir beginnen damit, ein Formularfeld vom Typ **Einzeiliger Text** hinzuzufügen. Sobald es hinzugefügt ist, fügen wir einen bestimmten Klassennamen hinzu, den wir in unserem Snippet verwenden, um die Ausführung des Skripts auszulösen.

Fügen Sie einfach `wpf-disable-space` in das Feld **CSS-Klassen** auf der Registerkarte **Erweitert** ein.

![Fügen Sie einfach die CSS-Klasse „wpf-disable-space“ in das Feld „CSS-Klassen“ auf der Registerkarte „Erweitert“ ein.](https://wpforms.com/wp-content/uploads/2022/03/wpforms-css-classname-advanced-tab.jpg)## Deaktivieren der Leertaste

Nun ist es an der Zeit, das Snippet zu unserer Website hinzuzufügen.

Wenn Sie Hilfe benötigen, wie und wo Sie Snippets zu Ihrer Website hinzufügen können, [lesen Sie bitte dieses Tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ „So fügen Sie benutzerdefiniertes PHP oder JavaScript für WPForms hinzu“).

Das `event.key` im Snippet, gefolgt von den drei Gleichheitszeichen, steht für eine bestimmte gedrückte Tastaturtaste. Für die Leertaste ist der Schlüssel einfach ein Leerzeichen.

Wenn Sie eine vollständige Liste weiterer spezieller numerischer Darstellungen wünschen, [lesen Sie bitte diesen Artikel](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values „Mozilla-Dokumentation zu Schlüsselwerten“).

Wenn der Benutzer nun versucht, das Feld **Benutzername** unseres Formulars auszufüllen, kann er kein Leerzeichen für den **Benutzernamen** eingeben.

Für alle zukünftigen Formulare müssen Sie lediglich den speziellen CSS-Klassennamen im Formular-Generator im Feld **CSS-Klassen** auf der Registerkarte **Erweitert** des Feldes hinzufügen.

Und das war’s schon! Sie haben die Leertaste in Ihrem Formularfeld erfolgreich deaktiviert! Möchten Sie als Nächstes Sonderzeichen in einem Formularfeld verhindern? Sehen Sie sich unser Tutorial zum Thema [Wie man Sonderzeichen in einem Formularfeld einschränkt](https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/ „Wie man Sonderzeichen in einem Formularfeld einschränkt“) an.

## Referenz-Aktion

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Verwendung der Aktion wpforms_wp_footer_end")

**Kategorien:** Felder

**Tags:** Javascript, JS

---