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 correio eletrónico ou outros campos em que os espaços possam causar problemas.
Este guia irá mostrar-lhe como desativar a tecla de espaço em campos de formulário específicos utilizando uma classe CSS e JavaScript simples.
Compreender a necessidade
Ao criar formulários que requerem formatos de entrada específicos, como nomes de utilizador ou códigos, evitar 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
Em primeiro lugar, 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.
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 nome que utilizarão para iniciar sessão no nosso sítio, não queremos permitir quaisquer espaços neste campo.
Começaremos por adicionar um campo de formulário Texto de linha única. Uma vez adicionado, vamos adicionar um nome de classe específico que utilizaremos no nosso snippet para acionar o script a executar.
Basta adicionar o wpf-disable-space para o Classes CSS no campo Avançado tab.
Desativar a tecla de espaço
Agora é altura de adicionar o snippet ao nosso site.
Se precisar de ajuda sobre como e onde adicionar snippets ao seu site, consulte este tutorial.
O event.key no snippet seguido do sinal de três iguais representa uma tecla específica do teclado pressionada. No caso da barra de espaços, a tecla é apenas um espaço vazio.
Agora, quando o utilizador tentar introduzir o campo Nome de utilizador do nosso formulário, não poderá introduzir um espaço para o 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çadas do campo enquanto estiver dentro do construtor de formulários.
E já está! Desactivou com êxito a tecla de espaço no seu campo de formulário! A seguir, gostaria de impedir quaisquer caracteres especiais dentro de um campo de formulário? Consulte o nosso tutorial sobre Como restringir caracteres especiais de um campo de formulário.