Como detectar mudança em input com JavaScript

Neste artigo você vai aprender a como detectar mudança em input com JavaScript, ou seja, cada alteração feita em um campo de formulário

Fala programador(a), beleza? Bora aprender mais sobre formulários e JavaScript!

Para checar a mudança de um input precisamos atrelar um evento ao mesmo

Precisamos então selecionar o elemento, alguns métodos para isso são:

• querySelector;
• querySelectorAll;
• getElementById;
• getElementsByClassName;

Após a seleção vamos colocar o evento de input, que é exatamente o que precisamos

Qualquer alteração será computada para nós realizarmos alguma ação

Veja um exemplo de código completo:

const input = document.querySelector("#my-input")

input.addEventListener("input", () => {
    console.log("Alterou algo!")
})

Perceba que temos a seleção na primeira linha, e depois temos o evento de input aplicado

Agora qualquer mudança no input ativa o console.log dentro do evento

Utilize esta área para fazer o que precisa com o input 🙂

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu a como detectar mudança em input com JavaScript

Utilizamos um método de seleção, para resgatar o input via DOM

E depois foi aplicado o evento input, que ativa a qualquer mudança que o campo de texto for submetido

Por exemplo: ao inserir algum caractere no campo do formulário

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Qual a diferença entre os eventos input e change?

Essa é a dúvida que sempre aparece junto quando o assunto é detectar mudança em campo de formulário

O evento input dispara a cada alteração no conteúdo do campo, ou seja, tecla por tecla

Já o change, em campos de texto, só dispara quando o campo perde o foco depois de ter sido alterado

const input = document.querySelector("#my-input")

input.addEventListener("input", () => { console.log("dispara a cada tecla") })

input.addEventListener("change", () => { console.log("dispara quando o campo perde o foco") })

Regra prática: quer reagir ENQUANTO o usuário digita (busca ao vivo, contador de caracteres, validação em tempo real)? input

Quer reagir só no valor final, quando a pessoa terminou? change 🙂

Como pegar o valor digitado no input?

O evento avisa que mudou, beleza, mas o que a gente quer mesmo é o valor que está lá dentro

Dá pra chegar nele por dois caminhos:

const input = document.querySelector("#my-input")

input.addEventListener("input", (e) => { console.log(e.target.value) console.log(input.value) })

O e.target é o próprio elemento que disparou o evento

Isso é MUITO útil quando você usa o mesmo listener em vários campos, porque aí você não precisa de uma variável separada pra cada input

E em checkbox, radio e select?

Aqui muda o jogo

Nesses campos o valor não é digitado, é escolhido, então o evento que faz sentido é o change

const check = document.querySelector("#aceito") const select = document.querySelector("#estado")

check.addEventListener("change", (e) => { console.log(e.target.checked) })

select.addEventListener("change", (e) => { console.log(e.target.value) })

Repara que no checkbox a gente lê o checked (true ou false), e não o value

Esse é o erro clássico de quem copiou o exemplo do campo de texto e colou no checkbox achando que ia funcionar igual

Como aplicar o evento em vários inputs de uma vez?

Lá em cima o artigo cita o querySelectorAll, então bora usar ele de verdade

const inputs = document.querySelectorAll("input")

inputs.forEach((input) => { input.addEventListener("input", (e) => { console.log(e.target.name, e.target.value) }) })

Que diferença tem pro querySelector? O querySelectorAll devolve uma LISTA de elementos, não um elemento só

Por isso o forEach: você percorre a lista e coloca o mesmo listener em cada campo

Em formulário com muitos campos isso economiza um monte de código repetido

O evento input dispara a cada tecla: como não fazer requisição demais?

Esse é o detalhe que envelhece o código desse tipo de artigo

Quando o exemplo é só um console.log, tudo bem

Mas hoje é comum ligar o campo a uma busca ao vivo ou a uma chamada de API, e aí cada letra digitada vira uma requisição

A saída clássica é o debounce: você espera o usuário parar de digitar por um tempinho antes de executar de fato

const input = document.querySelector("#my-input") let timer

input.addEventListener("input", (e) => { const valor = e.target.value

clearTimeout(timer)

timer = setTimeout(() => { console.log("agora sim, buscar por:", valor) }, 500) })

O clearTimeout cancela o agendamento anterior a cada tecla nova

Só quando a pessoa para de digitar o setTimeout chega ao fim e o seu código roda

O tempo de espera é escolha sua, ajuste até a busca parecer natural pra quem digita