LabEx
EntrarJunte-se

Manipular Eventos de Entrada de Formulário com JavaScript

HTMLBeginner
Pratique Agora

Introdução

Neste laboratório, os participantes aprenderão a lidar com eventos de entrada de formulário usando JavaScript, com foco na criação de um campo de entrada interativo e amigável ao usuário. O laboratório guia os alunos através da configuração de uma estrutura HTML, da implementação de técnicas dinâmicas de tratamento de eventos como onfocus e onblur, e da aplicação de estilos personalizados para aprimorar a interação do usuário.

O processo passo a passo cobre a criação de um campo de entrada com texto padrão, a escrita de JavaScript para limpar e restaurar o texto de entrada com base nas interações do usuário e a aplicação de feedback visual através de CSS. Ao final do laboratório, os participantes entenderão como manipular entradas de formulário programaticamente, melhorar a experiência do usuário e adquirir habilidades práticas em desenvolvimento web orientado a eventos.

Configurar a Estrutura HTML para a Entrada do Formulário

Nesta etapa, criaremos a estrutura HTML básica para uma entrada de formulário que demonstrará o tratamento de eventos JavaScript. Configuraremos um campo de entrada simples com um texto padrão que será manipulado dinamicamente usando eventos JavaScript.

Abra o WebIDE e crie um novo arquivo chamado index.html no diretório ~/project. Começaremos criando uma estrutura HTML5 básica com um campo de entrada:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Input Event Handling</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .input-container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input
        type="text"
        id="nameInput"
        value="Enter your name"
        class="form-input"
      />
    </div>
  </body>
</html>

Vamos detalhar os elementos-chave desta estrutura HTML:

  1. Criamos um campo de entrada simples com um id de nameInput
  2. A entrada tem um valor padrão de "Enter your name"
  3. Adicionamos uma classe CSS básica form-input para estilização futura
  4. Incluímos um layout simples centralizado para a entrada

Exemplo de saída ao abrir este arquivo HTML em um navegador:
Input Field with Default Text

O campo de entrada agora está pronto para adicionarmos o tratamento de eventos JavaScript nas etapas subsequentes. Usaremos esta estrutura para demonstrar os eventos onfocus e onblur nas próximas etapas.

Implementar o Evento onfocus para Limpar o Texto Padrão

Nesta etapa, adicionaremos JavaScript para implementar o evento onfocus, que limpará o texto padrão quando o campo de entrada receber foco. Abra o arquivo index.html no WebIDE e modifique-o para incluir uma tag <script> com nossa lógica de tratamento de eventos:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Input Event Handling</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .input-container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input
        type="text"
        id="nameInput"
        value="Enter your name"
        class="form-input"
        onfocus="clearDefaultText(this)"
      />
    </div>

    <script>
      function clearDefaultText(input) {
        // Check if the current value is the default text
        if (input.value === "Enter your name") {
          // Clear the input field
          input.value = "";
        }
      }
    </script>
  </body>
</html>

Vamos detalhar as principais mudanças:

  1. Adicionamos o atributo onfocus ao elemento de entrada, que chama a função clearDefaultText() quando a entrada recebe foco.
  2. A função clearDefaultText() verifica se o valor atual é o texto padrão.
  3. Se o texto padrão estiver presente, ele limpa o campo de entrada.

Exemplo de interação:

  • Quando a página carrega, a entrada mostra "Enter your name"
  • Quando você clica/tabula no campo de entrada, o texto desaparece
  • Agora você pode digitar seu próprio texto livremente

Essa abordagem oferece uma experiência de usuário limpa, removendo o texto padrão quando o usuário está pronto para inserir suas próprias informações.

Adicionar o Evento onblur para Restaurar o Texto Padrão

Nesta etapa, aprimoraremos nosso campo de entrada adicionando um manipulador de eventos onblur que restaura o texto padrão se o usuário sair do campo de entrada sem inserir nenhum texto. Atualize o arquivo index.html no WebIDE com o seguinte código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Input Event Handling</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .input-container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input
        type="text"
        id="nameInput"
        value="Enter your name"
        class="form-input"
        onfocus="clearDefaultText(this)"
        onblur="restoreDefaultText(this)"
      />
    </div>

    <script>
      function clearDefaultText(input) {
        if (input.value === "Enter your name") {
          input.value = "";
        }
      }

      function restoreDefaultText(input) {
        // If the input is empty, restore the default text
        if (input.value.trim() === "") {
          input.value = "Enter your name";
        }
      }
    </script>
  </body>
</html>

Mudanças-chave nesta etapa:

  1. Adicionado o atributo onblur ao elemento de entrada, que chama a função restoreDefaultText() quando a entrada perde o foco.
  2. Criada uma nova função restoreDefaultText() que:
    • Verifica se a entrada está vazia (usando trim() para lidar com espaços em branco)
    • Restaura o texto padrão se nenhum conteúdo for inserido

Exemplo de interação:

  • Clique no campo de entrada
  • O texto padrão desaparece
  • Se você não digitar nada e clicar fora
  • O texto padrão "Enter your name" reaparece

Essa abordagem oferece uma experiência de usuário suave, por meio de:

  • Limpar o texto padrão quando o usuário começa a digitar
  • Restaurar o texto padrão se o usuário não inserir nada

Estilizar o Campo de Input ao Receber Foco

Nesta etapa, aprimoraremos a experiência do usuário adicionando estilos dinâmicos ao campo de entrada quando ele recebe foco. Atualize o arquivo index.html no WebIDE com o seguinte código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Input Event Handling</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .input-container {
        text-align: center;
      }
      .form-input {
        padding: 10px;
        font-size: 16px;
        border: 2px solid #ccc;
        border-radius: 5px;
        transition: all 0.3s ease;
      }
      .form-input:focus {
        outline: none;
        border-color: #4caf50;
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input
        type="text"
        id="nameInput"
        value="Enter your name"
        class="form-input"
        onfocus="clearDefaultText(this)"
        onblur="restoreDefaultText(this)"
      />
    </div>

    <script>
      function clearDefaultText(input) {
        if (input.value === "Enter your name") {
          input.value = "";
        }
      }

      function restoreDefaultText(input) {
        if (input.value.trim() === "") {
          input.value = "Enter your name";
        }
      }
    </script>
  </body>
</html>

Principais mudanças de estilo:

  1. Adicionado CSS para a classe .form-input:
    • Estilo básico com preenchimento (padding), tamanho da fonte e borda
    • Efeito de transição suave
  2. Adicionado estilo da pseudo-classe :focus:
    • Remove o contorno padrão (outline)
    • Altera a cor da borda para verde
    • Adiciona uma sutil sombra (box shadow) quando em foco

Exemplo de mudanças visuais:

  • Estado padrão: Borda cinza, aparência padrão
  • Em foco:
    • Borda fica verde
    • Efeito de brilho suave aparece
    • Animação de transição suave

Essa estilização fornece feedback visual aos usuários, melhorando a experiência interativa do campo de entrada.

Testar e Validar o Tratamento de Eventos de Input do Formulário

Nesta etapa final, aprimoraremos nosso campo de entrada com validação e tratamento de eventos adicionais para criar uma experiência de usuário mais robusta. Atualize o arquivo index.html no WebIDE com o seguinte código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Input Event Handling</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .input-container {
        text-align: center;
        margin-bottom: 20px;
      }
      .form-input {
        padding: 10px;
        font-size: 16px;
        border: 2px solid #ccc;
        border-radius: 5px;
        transition: all 0.3s ease;
        width: 300px;
      }
      .form-input:focus {
        outline: none;
        border-color: #4caf50;
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
      }
      #validationMessage {
        color: #4caf50;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <input
        type="text"
        id="nameInput"
        value="Enter your name"
        class="form-input"
        onfocus="clearDefaultText(this)"
        onblur="restoreDefaultText(this)"
        oninput="validateInput(this)"
      />
    </div>
    <div id="validationMessage"></div>

    <script>
      function clearDefaultText(input) {
        if (input.value === "Enter your name") {
          input.value = "";
        }
      }

      function restoreDefaultText(input) {
        if (input.value.trim() === "") {
          input.value = "Enter your name";
        }
      }

      function validateInput(input) {
        const validationMessage = document.getElementById("validationMessage");

        if (input.value.length > 0 && input.value !== "Enter your name") {
          // Basic validation: check name length
          if (input.value.length < 2) {
            validationMessage.textContent = "Name is too short!";
            validationMessage.style.color = "red";
          } else if (input.value.length > 20) {
            validationMessage.textContent = "Name is too long!";
            validationMessage.style.color = "red";
          } else {
            validationMessage.textContent = "Valid name entered!";
            validationMessage.style.color = "#4CAF50";
          }
        } else {
          validationMessage.textContent = "";
        }
      }
    </script>
  </body>
</html>

Melhorias-chave nesta etapa:

  1. Adicionado um evento oninput para fornecer validação em tempo real
  2. Criada uma função validateInput() que:
    • Verifica o comprimento da entrada
    • Fornece mensagens de feedback dinâmicas
    • Altera a cor da mensagem com base no status da validação

Exemplo de interação:

  • Digite um nome muito curto (por exemplo, "A") → "Name is too short!" (vermelho)
  • Digite um nome muito longo → "Name is too long!" (vermelho)
  • Digite um nome válido (2-20 caracteres) → "Valid name entered!" (verde)

Essa abordagem demonstra:

  • Tratamento de eventos
  • Validação dinâmica
  • Mecanismos de feedback do usuário

Resumo

Neste laboratório, os participantes aprendem a lidar com eventos de entrada de formulário usando JavaScript, criando um campo de entrada interativo com manipulação de texto dinâmica. O laboratório guia os alunos através da configuração de uma estrutura HTML com um valor de entrada padrão, implementando eventos onfocus e onblur para aprimorar a interação do usuário e aplicando estilos CSS para fornecer feedback visual quando o campo de entrada é selecionado.

A abordagem passo a passo cobre técnicas fundamentais de desenvolvimento web, incluindo a criação de um layout HTML responsivo, o uso de ouvintes de eventos JavaScript para modificar o comportamento da entrada e a aplicação de estilos CSS para melhorar a interface do usuário. Ao seguir estas etapas práticas, os participantes ganham experiência prática na criação de interações de formulário mais intuitivas e fáceis de usar, utilizando tecnologias web essenciais.

Relacionados HTML Cursos
HTML para Iniciantes

HTML para Iniciantes

htmlweb-development
Construa um Jogo da Velha Web

Construa um Jogo da Velha Web

javascriptweb-development
Criando um Jogo Web Whack-a-Mole

Criando um Jogo Web Whack-a-Mole

javascriptweb-development