### [Come disabilitare il tasto spazio all'interno di un campo di un modulo](https://wpforms.com/developers/how-to-disable-the-space-key-inside-a-form-field/)

**Pubblicato:** 29 marzo 2022
**Autore:** Umair Majeed

**Estratto:** Questo tutorial ti guiderà attraverso la procedura per disabilitare facilmente il tasto spazio in qualsiasi campo di un modulo utilizzando un nome di classe CSS e un breve snippet JavaScript. 

**Contenuto:**

Desideri impedire agli utenti di inserire spazi in determinati campi di un modulo? Ciò può essere utile per nomi utente, indirizzi e-mail o altri campi in cui gli spazi potrebbero causare problemi.

Questa guida ti mostrerà come disabilitare il tasto spazio in specifici campi del modulo utilizzando una classe CSS e un semplice JavaScript.

## Comprendere l'esigenza

Quando si creano moduli che richiedono formati di input specifici, come nomi utente o codici, impedire l'inserimento di spazi può aiutare a mantenere l'integrità dei dati. Ad esempio, in un modulo di registrazione utente, potresti volere nomi utente senza spazi per garantire credenziali di accesso coerenti.

## Configurazione del modulo

Per prima cosa, crea il tuo modulo e aggiungi i campi in cui desideri disabilitare il tasto spazio. Se hai bisogno di aiuto per creare un modulo, consulta la nostra guida su [come creare il tuo primo modulo](https://wpforms.com/docs/creating-first-form/).

Ai fini di questo tutorial, creeremo un modulo di registrazione utente in cui i nostri visitatori potranno impostare i propri nomi utente. Poiché questo sarà ciò che useranno per accedere al nostro sito, non vogliamo consentire spazi in questo campo.

Inizieremo aggiungendo un campo del modulo **Testo su una riga**. Una volta aggiunto, aggiungeremo un nome di classe specifico che useremo nel nostro snippet per attivare l'esecuzione dello script.

Basta aggiungere `wpf-disable-space` al campo **Classi CSS** nella scheda **Avanzate**.

![Basta aggiungere la classe CSS wpf-disable-space al campo Classi CSS nella scheda Avanzate.](https://wpforms.com/wp-content/uploads/2022/03/wpforms-css-classname-advanced-tab.jpg)## Disabilitare il tasto spazio

Ora è il momento di aggiungere lo snippet al nostro sito.

Se hai bisogno di assistenza su come e dove aggiungere snippet al tuo sito, [consulta questo tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Come aggiungere PHP o JavaScript personalizzati per WPForms").

Il `event.key` nello snippet seguito dai tre segni di uguale rappresenta un tasto specifico della tastiera premuto. Per la barra spaziatrice, il tasto è semplicemente uno spazio vuoto.

Se desideri un elenco completo di altre rappresentazioni numeriche speciali, [consulta questo articolo](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values "Documentazione Mozilla sui valori dei tasti").

Ora, quando l'utente proverà a compilare il campo **Nome utente** del nostro modulo, non potrà inserire uno spazio nel campo **Nome utente**.

Tutto ciò che dovrai fare per i moduli futuri è semplicemente aggiungere il nome della classe CSS speciale al campo **Classi CSS** nella scheda **Avanzate** del campo mentre sei all'interno del generatore di moduli.

E questo è tutto! Hai disabilitato con successo il tasto spazio all'interno del campo del tuo modulo! Ora, vorresti impedire l'inserimento di caratteri speciali all'interno di un campo del modulo? Dai un'occhiata al nostro tutorial su [Come limitare i caratteri speciali in un campo del modulo](https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/ "Come limitare i caratteri speciali in un campo del modulo").

## Azione di riferimento

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Utilizzo dell'azione wpforms_wp_footer_end")

**Categorie:** Campi

**Tag:** Javascript, JS

---