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:
- Criamos um campo de entrada simples com um
iddenameInput - A entrada tem um valor padrão de "Enter your name"
- Adicionamos uma classe CSS básica
form-inputpara estilização futura - Incluímos um layout simples centralizado para a entrada
Exemplo de saída ao abrir este arquivo HTML em um navegador:
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:
- Adicionamos o atributo
onfocusao elemento de entrada, que chama a funçãoclearDefaultText()quando a entrada recebe foco. - A função
clearDefaultText()verifica se o valor atual é o texto padrão. - 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:
- Adicionado o atributo
onblurao elemento de entrada, que chama a funçãorestoreDefaultText()quando a entrada perde o foco. - 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
- Verifica se a entrada está vazia (usando
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:
- Adicionado CSS para a classe
.form-input:- Estilo básico com preenchimento (padding), tamanho da fonte e borda
- Efeito de transição suave
- 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:
- Adicionado um evento
oninputpara fornecer validação em tempo real - 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.
