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 🙂
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!