JavaScript

Como não permitir que um caractere seja digitado em um input com JavaScript

31 de agosto de 2020

Como não permitir que um caractere seja digitado em um input com JavaScript

Neste artigo você vai aprender como não permitir que um caractere seja digitado em um input ou área de texto com JavaScript puro.

Como não permitir que um caractere seja digitado em um input capa

Fala galera, beleza? Bora aprender mais sobre como limitar caracteres com JavaScript!

A ideia é primeiramente mapear, atribuindo a uma variável, o input ou área de texto que o caractere não pode ser digitado

Depois iremos adicionar um evento de keypress – para que seja ativado a cada tecla que for pressionada no textbox

Vamos então identificar a tecla que foi digitada por meio do evento e caso seja algum dígito que queremos evitar nós vamos cancelar a inserção

Veja o código:

const input = document.querySelector("#input");

input.addEventListener("keypress", function(e) {

	if(e.key === ",") {
  	e.preventDefault();
  }
  
});

Neste caso estamos limitando a vírgula de aparecer no input com id de #input, veja que o cancelamento do evento é feito por o método preventDefault

Onde o mesmo só é executado após checar se o que foi digitado bate com o que queremos bloquear naquele input ou área de texto

E se você quiser bloquear diversos caracteres, uma melhor alternativa seria inserir os mesmos em um array

E fazer a checagem se o elemento está dentro do array, para depois prosseguir com o bloqueio do evento ou a continuidade do seu código

Com certeza esta abordagem será melhor do que encadear uma série de ifs para cada um dos caracteres que você precisa eliminar deste input

A manutenção e entendimento de código será facilitada por esta ação mais resumida de código

Conclusão

Neste artigo vimos como não permitir que um caractere seja digitado em um input

Primeiramente mapeamos o textbox em uma variável para depois fazer as validações necessárias em cada keypress

Ou seja, cada vez que uma tecla é pressionada em um determinado campo de texto verificamos se a mesma é a que queremos bloquear

Se for, paramos o evento com o método preventDefault

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x