Aula 58 — Eventos de formulário e texto

Até aqui, vimos eventos de mouse e teclado. Mas a maior parte da interação do usuário com uma aplicação acontece em inputs, formulários e campos de texto.

Nesta aula, vamos aprender os eventos certos para lidar com digitação, foco, mudanças de valor e envio de formulários.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Usar eventos de formulário corretamente
• Entender a diferença entre input e change
• Capturar foco e perda de foco
• Controlar o envio de formulários
• Criar validações em tempo real

O evento input

O evento input é disparado toda vez que o valor do campo muda.

Ele é ideal para validações em tempo real.

 
  const campo = document.getElementById("nome");
  campo.addEventListener("input", (event) => 
  {
    console.log(event.target.value);
  });

 console.log(event.target.value); // Saída será o texto digitado em tempo real 

input vs keydown

Diferença importante:

• keydown → detecta a tecla
• input → detecta o valor final

O evento change

O change é disparado quando:

• O valor muda
• E o campo perde o foco

 campo.addEventListener("change", () => { console.log("Valor confirmado"); }); 

 console.log("Valor confirmado"); // Saída ocorre ao sair do campo 

Muito usado para:

• Selects
• Confirmações de valor

focus e blur

Esses eventos detectam quando o campo ganha ou perde foco.

 
  campo.addEventListener("focus", () => 
  { 
    console.log("Campo em foco"); });
    campo.addEventListener("blur", () =>
    {
      console.log("Campo perdeu foco");
    });

 console.log("Campo em foco"); // Ao clicar no campo console.log("Campo perdeu foco"); // Ao sair do campo 

Eles são muito usados para:

• Mostrar mensagens de ajuda
• Validações
• Destaques visuais

O evento submit

O submit é disparado quando o formulário é enviado.

 
  const form = document.getElementById("formulario");
  form.addEventListener("submit", (event) => 
  {
    event.preventDefault();
    console.log("Formulário enviado");
  });

 console.log("Formulário enviado"); // Saída ocorre ao clicar em enviar 

O preventDefault impede o recarregamento da página.

Exemplo real: validação simples

 campo.addEventListener("input", () => { if (campo.value.length < 3) { campo.classList.add("erro"); } else { campo.classList.remove("erro"); } }); 

Aqui combinamos:

• Evento input
• Manipulação de classes CSS

Boas práticas com formulários

• Use input para texto em tempo real
• Use change para confirmação
• Use submit no formulário, não no botão
• Sempre trate o envio com preventDefault

Na próxima aula, vamos fechar esse mini-bloco com uma introdução ao Drag and Drop.