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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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 🙂

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!