Campos de Texto - 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: ocorre quando o campo recebe foco.
blur: ocorre quando o campo perde o foco.
change: acontece quando o valor do campo é alterado.
input: ocorre com cada alteração no valor do campo.
select: acontece quando o texto dentro do campo é selecionado.
keydown: ocorre ao pressionar uma tecla.
keypress: acontece ao pressionar teclas que produzem caracteres.
keyup: ocorre 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 ocorre 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 ocorre quando o usuário termina a entrada e move o foco para outro elemento, o evento input ocorre 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>

Obtenção de senha com o uso de código em JavaScript

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 ocorre 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.