Como impedir a digitação de caracteres em Java Script

Às vezes, você precisa limitar a entrada de texto em um campo de formulário, como quando quer garantir que o usuário insira apenas números, ou quando quer bloquear caracteres especiais para campos específicos. Com JavaScript, podemos facilmente impedir a digitação de certos caracteres e garantir que o input atenda aos requisitos desejados. Neste post, aprenda como impedir a digitação de caracteres em Java Script.

1. Por que impedir a digitação de certos caracteres?

Impedir a digitação de caracteres específicos é útil em diversas situações, como:

• Garantir que apenas números sejam inseridos em campos como CEP, CPF ou telefones.
  
  
• Evitar que caracteres especiais sejam inseridos em campos que precisam de apenas letras.
  
  
• Bloquear símbolos em campos que exigem dados padronizados, como senhas, e-mails ou nomes.

2. Impedindo a digitação de caracteres com o evento keydown

A maneira mais direta de evitar a digitação de certos caracteres é usar o evento keydown para capturar a tecla pressionada e bloqueá-la se ela estiver na lista de caracteres indesejados.

Exemplo: Impedindo caracteres não numéricos

Veja um exemplo em que bloqueamos todos os caracteres que não são números em um campo de texto:

<form>
    <label for="numero">Digite apenas números:</label>
    <input type="text" id="numero" placeholder="Apenas números" onkeydown="bloquearNaoNumeros(event)">
</form>

<script>
function bloquearNaoNumeros(event) {
    const tecla = event.key;

    // Permitir teclas de controle como Backspace, Delete, Tab, etc.
    const teclasControle = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight'];

    // Bloquear tudo que não for números (0-9) ou teclas de controle
    if (!/^\d$/.test(tecla) && !teclasControle.includes(tecla)) {
        event.preventDefault();
    }
}
</script>

Como funciona:

• O evento keydown é disparado sempre que o usuário pressiona uma tecla.
  
  
• O código bloqueia a digitação de qualquer tecla que não seja um número (de 0 a 9) ou uma tecla de controle, como Backspace ou Delete.
  
  
• Se a tecla pressionada não for permitida, a função event.preventDefault() impede que ela seja registrada no campo.

3. Bloqueando caracteres específicos com o evento input

Outra forma de impedir a digitação de certos caracteres é usando o evento input. Nesse caso, podemos verificar o valor do campo conforme o usuário digita e remover qualquer caractere indesejado.

Exemplo: Bloquear caracteres especiais

Vamos criar um campo onde não é permitido inserir caracteres especiais como @, #, !, etc.

<form>
    <label for="nome">Digite seu nome (sem caracteres especiais):</label>
    <input type="text" id="nome" placeholder="Apenas letras e números" oninput="bloquearCaracteresEspeciais(this)">
</form>

<script>
function bloquearCaracteresEspeciais(campo) {
    // Substituir caracteres especiais por nada, mantendo apenas letras e números
    campo.value = campo.value.replace(/[^a-zA-Z0-9 ]/g, '');
}
</script>

Como funciona:

• O evento input é disparado toda vez que o valor do campo muda (ou seja, quando o usuário digita ou cola algo).
  
  
• A função usa uma expressão regular ([^a-zA-Z0-9 ]) para substituir todos os caracteres que não são letras (a-z, A-Z), números (0-9), ou espaço (), garantindo que o valor do campo contenha apenas caracteres permitidos.

4. Permitir apenas letras com JavaScript

Se você quiser permitir apenas letras no campo de entrada, como em campos de nome ou sobrenome, o processo é semelhante.

Exemplo: Permitir apenas letras

<form>
    <label for="letras">Digite apenas letras:</label>
    <input type="text" id="letras" placeholder="Somente letras" oninput="permitirSomenteLetras(this)">
</form>

<script>
function permitirSomenteLetras(campo) {
    // Substituir tudo que não for letra (a-z ou A-Z) por nada
    campo.value = campo.value.replace(/[^a-zA-Z]/g, '');
}
</script>

Como funciona:

• O replace() remove todos os caracteres que não são letras, usando a expressão regular [^a-zA-Z].
  
  
• Qualquer caractere que não seja permitido será automaticamente removido enquanto o usuário digita.

5. Bloquear colagem de texto com caracteres proibidos

Se o usuário tentar colar texto com caracteres proibidos no campo, você pode usar a mesma lógica para bloquear esses caracteres. O evento input também captura a ação de colar, então o código acima já lida com esse caso.

No entanto, você pode querer dar um passo adiante e impedir a colagem completamente.

Exemplo: Impedir colagem

<form>
    <label for="senha">Digite sua senha (sem colagem):</label>
    <input type="password" id="senha" placeholder="Digite sua senha" onpaste="return false">
</form>

Como funciona:

• O atributo onpaste="return false" bloqueia a ação de colar no campo, garantindo que o usuário não possa colar texto.
  
  
• É útil em campos onde você quer que o usuário digite manualmente as informações, como senhas.

6. Bloqueando caracteres em vários campos ao mesmo tempo

Se você quiser aplicar as mesmas regras a vários campos, pode associar a mesma função a todos eles, passando um identificador para diferenciá-los.

Exemplo: Aplicar em vários campos

<form>
    <label for="cpf">CPF (apenas números):</label>
    <input type="text" id="cpf" placeholder="Digite seu CPF" oninput="bloquearNaoNumeros(this)">

    <label for="telefone">Telefone (apenas números):</label>
    <input type="text" id="telefone" placeholder="Digite seu telefone" oninput="bloquearNaoNumeros(this)">
</form>

<script>
function bloquearNaoNumeros(campo) {
    // Substituir tudo que não for número por nada
    campo.value = campo.value.replace(/[^0-9]/g, '');
}
</script>

Como funciona:

• A mesma função bloquearNaoNumeros() é usada para garantir que os campos CPF e telefone aceitem apenas números.
  
  
• A função é chamada para cada campo de entrada individualmente.

Outro exemplo prático

Impedir a digitação de caracteres em campo do tipo texto:

<script language='javascript'> 	
			   
function SomenteNum(e) {
	
   var tecla=(window.event)?event.keyCode:e.which;
					
   if((tecla>47 && tecla<58)) 
      return true;
   else {		
	 if (tecla==8 || tecla==0) 
		return true;
	  else  
		return false;
   }

 }	
		   
</script>

Código HTML:

<form name='teste' method='post' action='teste.php'>
  <input type='text' size='2' maxlength='2' name='num' onkeypress='return SomenteNum(event);'>
  <input type=submit value='Testar'>
</form>

Impedir a digitação de caracteres indesejados em JavaScript é uma técnica simples e eficaz para garantir a integridade dos dados inseridos em formulários.

Ao bloquear certos caracteres e permitir apenas os tipos de dados desejados, você melhora a experiência do usuário e minimiza erros de entrada.

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: caracteres javascript