### [Como desativar a tecla de espaço num 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

**Excerto:** Este tutorial irá guiá-lo através do processo para desativar facilmente a tecla de espaço em qualquer campo de formulário com um nome de classe CSS e um pequeno trecho de JavaScript. 

**Conteúdo:**

Gostaria de impedir que os utilizadores introduzam espaços em determinados campos de formulário? Isto pode ser útil para nomes de utilizador, endereços de e-mail ou outros campos onde os espaços possam causar problemas.

Este guia irá mostrar-lhe como desativar a tecla de espaço em campos específicos de formulários utilizando uma classe CSS e JavaScript simples.

## Compreender a Necessidade

Ao criar formulários que exigem formatos de entrada específicos, como nomes de utilizador ou códigos, impedir a introdução de espaços pode ajudar a manter a integridade dos dados. Por exemplo, num formulário de registo de utilizador, poderá querer nomes de utilizador sem espaços para garantir credenciais de início de sessão consistentes.

## Configurar o seu formulário

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

Para efeitos deste tutorial, vamos criar um formulário de registo de utilizador no qual os nossos visitantes podem definir os seus próprios nomes de utilizador. Uma vez que este será o que utilizarão para iniciar sessão no nosso site, não queremos permitir espaços neste campo.

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

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

![Basta adicionar a classe CSS wpf-disable-space ao campo **Classes CSS** no separador **Avançado**.](https://wpforms.com/wp-content/uploads/2022/03/wpforms-css-classname-advanced-tab.jpg)## Desativar a tecla de 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 snippet, seguido dos 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 desejar 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 utilizador tentar preencher o campo **Nome de utilizador** do nosso formulário, não poderá inserir um espaço no campo **Nome de utilizador**.

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

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

## Ação de referência

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

**Categorias:** Campos

**Etiquetas:** Javascript, JS

---