Trabalhando com Campos de Texto em JavaScript
Para inserção de informações textuais simples, utilizamos elementos input do tipo "text":
<input type="text" name="key" size="10" maxlength="15" value="hello world" />Este elemento suporta uma série de eventos, como:
focus: dispara quando o campo recebe foco.blur: dispara quando o campo perde o foco.change: dispara quando o valor do campo é alterado.input: dispara com cada alteração no valor do campo.select: dispara quando o texto dentro do campo é selecionado.keydown: dispara ao pressionar uma tecla.keypress: dispara ao pressionar teclas que produzem caracteres.keyup: dispara quando uma tecla pressionada é liberada.
Consideremos a aplicação de alguns eventos:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Programício</title>
</head>
<body>
<form name="search">
<input type="text" name="key" placeholder="Digite a chave" />
<input type="button" name="print" value="Imprimir" />
</form>
<div id="printBlock"></div>
<script>
const keyBox = document.search.key;
// tratamento da mudança de texto
function onchange(e) {
const printBlock = document.getElementById("printBlock");
const val = e.target.value;
printBlock.textContent = val;
}
// tratamento da perda de foco
function onblur(e) {
const text = keyBox.value.trim();
keyBox.style.borderColor = text === "" ? "red" : "green";
}
// ao receber foco
function onfocus(e) {
keyBox.style.borderColor = "blue";
}
keyBox.addEventListener("change", onchange);
keyBox.addEventListener("blur", onblur);
keyBox.addEventListener("focus", onfocus);
</script>
</body>
</html>Aqui, três manipuladores são anexados ao campo de texto para os eventos blur, focus e change. O tratamento do evento change cria uma forma de vinculação: ao alterar o texto, o texto completo é exibido no bloco printBlock. Contudo, é importante notar que o evento change dispara não imediatamente após a mudança do texto, mas após o campo perder o foco.
O tratamento do evento blur permite validar o valor inserido. Por exemplo, neste caso, se o texto consistir apenas de espaços ou estiver vazio, a borda do campo será pintada de vermelho.
Além do evento change, podemos tratar alterações no texto monitorando o evento input. Diferente do change, que dispara quando o usuário termina a entrada e move o foco para outro elemento, o evento input dispara imediatamente ao adicionar ou remover um caractere:
const keyBox = document.search.key;
// tratamento da mudança de texto
function oninput(e) {
const printBlock = document.getElementById("printBlock");
const val = e.target.value;
printBlock.textContent = val;
}
keyBox.addEventListener("input", oninput);Campo de Senha
Além do campo de texto comum, há campos especiais para entrada, como o input do tipo "password", destinado à inserção de senha. Em termos de funcionalidade, é muito semelhante ao campo de texto comum, exceto que os caracteres digitados são mascarados:
<input type="password" name="password" />No entanto, o valor inserido não é criptografado, e podemos obtê-lo facilmente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PROGRAMICIO>COM</title>
</head>
<body>
<form name="loginForm">
<input type="password" name="password" />
</form>
<div id="printBlock"></div>
<script>
const passwordBox = document.loginForm.password;
// tratamento da mudança de texto
function oninput(e) {
const printBlock = document.getElementById("printBlock");
printBlock.textContent = e.target.value;
}
passwordBox.addEventListener("input", oninput);
</script>
</body>
</html>
Campo Oculto
Se precisamos que um valor esteja presente no formulário mas oculto para o usuário, podemos utilizar campos ocultos:
<input type="hidden" name="id" value="345" />Normalmente, não se processam eventos em campos ocultos, mas, assim como com outros elementos, podemos obter ou alterar seu valor com JavaScript.
Elemento Textarea
Para criar campos de texto multilinha, usamos o elemento textarea:
<textarea rows="15" cols="40" name="textArea"></textarea>Este elemento gera os mesmos eventos que o campo de texto comum:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Programício</title>
</head>
<body>
<form name="search">
<textarea rows="7" cols="40" name="message"></textarea>
</form>
<div id="printBlock"></div>
<script>
const messageBox = document.search.message;
// tratamento do evento de pressionamento de tecla
function onkeypress(e) {
const printBlock = document.getElementById("printBlock");
const val = String.fromCharCode(e.keyCode);
printBlock.textContent += val;
}
function onkeydown(e) {
if (e.keyCode === 8) {
// se a tecla Backspace for pressionada
const printBlock = document.getElementById("printBlock"),
length = printBlock.textContent.length;
printBlock.textContent = printBlock.textContent.substring(0, length - 1);
}
}
messageBox.addEventListener("keypress", onkeypress);
messageBox.addEventListener("keydown", onkeydown);
</script>
</body>
</html>Aqui, manipuladores são anexados ao campo de texto para os eventos keypress e keydown. No manipulador keypress, o caractere digitado é obtido convertendo o código numérico da tecla em uma string:
const val = String.fromCharCode(e.keyCode);Então, o caractere é adicionado ao conteúdo do bloco printBlock.
O evento keypress dispara quando teclas que produzem caracteres são pressionadas, fazendo com que esses caracteres apareçam no campo de texto. No entanto, outras teclas que influenciam o campo de texto, como a tecla Backspace, que deleta o último caractere, não geram caracteres visíveis e, portanto, não são detectadas pelo evento keypress. Para essas, processamos também o evento keydown, onde removemos o último caractere da string no bloco printBlock.
