### [Como desativar a tecla de espaço dentro de um campo de formulário](https://wpforms.com/developers/how-to-disable-the-space-key-inside-a-form-field/)

**Publicado:** 29 de março de 2022
**Autor:** Umair Majeed

**Trecho:** Este tutorial irá orientá-lo sobre como desativar facilmente a tecla de espaço em qualquer campo de formulário usando um nome de classe CSS e um pequeno trecho de JavaScript. 

**Conteúdo:**

Você gostaria de impedir que os usuários insiram espaços em determinados campos de formulário? Isso pode ser útil para nomes de usuário, endereços de e-mail ou outros campos onde os espaços podem causar problemas.

Este guia mostrará como desativar a tecla de espaço em campos específicos de formulário usando uma classe CSS e um JavaScript simples.

## Entendendo a necessidade

Ao criar formulários que exigem formatos de entrada específicos, como nomes de usuário ou códigos, impedir o uso de espaços pode ajudar a manter a integridade dos dados. Por exemplo, em um formulário de registro de usuário, você pode querer nomes de usuário sem espaços para garantir credenciais de login consistentes.

## Configurando seu formulário

Primeiro, crie seu formulário e adicione os campos nos quais deseja desativar a tecla de espaço. Se precisar de ajuda para criar um formulário, consulte nosso guia sobre [como criar seu primeiro formulário](https://wpforms.com/docs/creating-first-form/).

Para os fins deste tutorial, vamos criar um formulário de registro de usuário no qual nossos visitantes possam definir seus próprios nomes de usuário. Como isso será o que eles usarão para fazer login em nosso site, não queremos permitir espaços neste campo.

Começaremos adicionando um campo de formulário **Texto de Linha Única**. Depois de adicionado, vamos atribuir um nome de classe específico que usaremos em nosso snippet para acionar a execução do script.

Basta adicionar `wpf-disable-space` ao campo **Classes CSS** na guia **Avançado**.

![Basta adicionar a classe CSS wpf-disable-space ao campo **Classes CSS** na guia **Avançado**.](https://wpforms.com/wp-content/uploads/2022/03/wpforms-css-classname-advanced-tab.jpg)## Desativando a tecla Espaço

Agora é hora de adicionar o snippet ao nosso site.

Se precisar de ajuda sobre como e onde adicionar trechos de código ao seu site, [consulte este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Como adicionar PHP ou JavaScript personalizado para o WPForms").

O `event.key` no trecho, seguido pelos três sinais de igual, representa uma tecla específica do teclado pressionada. Para a barra de espaço, a tecla é apenas um espaço vazio.

Se você quiser uma lista completa de outras representações numéricas especiais, [consulte este artigo](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values "Documentação da Mozilla sobre valores de teclas").

Agora, quando o usuário tentar preencher o campo **Nome de usuário** do nosso formulário, ele não poderá inserir um espaço no campo **Nome de usuário**.

Tudo o que você precisa fazer para todos os formulários futuros é apenas adicionar o nome da classe CSS especial ao campo **Classes CSS** na guia **Avançado** do campo, enquanto estiver no construtor de formulários.

E é isso! Você desativou com sucesso a tecla de espaço dentro do campo do seu formulário! A seguir, você gostaria de impedir a inserção de caracteres especiais dentro de um campo de formulário? Confira nosso tutorial sobre [Como restringir caracteres especiais em um campo de formulário](https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/ "Como restringir caracteres especiais em um campo de formulário").

## Ação de referência

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Usando a ação wpforms_wp_footer_end")

**Categorias:** Campos

**Tags:** Javascript, JS

---