Resumo de IA
Gostaria de impedir que os utilizadores insiram 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 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, impedir espaços pode ajudar a manter a integridade dos dados. Por exemplo, num formulário de registo de utilizador, pode querer nomes de utilizador sem espaços para garantir credenciais de login 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.
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. Como este será o que eles usarão para iniciar sessão no nosso site, não queremos permitir quaisquer espaços neste campo.
Começaremos por adicionar um campo de formulário de Texto de Linha Única. Assim que adicionado, vamos adicionar um nome de classe específico que usaremos no nosso snippet para acionar a execução do script.
Basta adicionar wpf-disable-space ao campo Classes CSS no separador Avançadas.
Desativar a Tecla de Espaço
Agora é hora de adicionar o snippet ao nosso site.
Se precisar de alguma assistência sobre como e onde adicionar snippets ao seu site, por favor, veja este tutorial.
O event.key no snippet seguido pelos três sinais de igual representa uma tecla específica pressionada. Para a barra de espaço, a tecla é apenas um espaço em branco.
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 especial da classe CSS ao campo Classes CSS no separador Avançadas do campo enquanto estiver dentro do construtor de formulários.
E é tudo! Desativou com sucesso a tecla de espaço dentro do seu campo de formulário! Em seguida, 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.