Resumo : neste tutorial, você aprenderá sobre o evento de entrada JavaScript que é acionado sempre que o valor de <input>
, <select>
And <textarea>
muda.
Introdução ao evento de entrada JavaScript
O input
evento é acionado sempre que o valor do elemento <input>
, <select>
ou <textarea>
é alterado.
Ao contrário do change
evento que só é acionado quando o valor é confirmado, o input
evento é acionado sempre que o valor é alterado.
Por exemplo, se você estiver digitando no <input>
elemento, o elemento disparará o input
evento continuamente. Porém, o change
evento só é acionado quando o <input>
elemento perde o foco.
O exemplo a seguir ilustra o input
evento do <input>
elemento:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript input Event Demo</title>
</head>
<body>
<label for="message">Message</label>
<input placeholder="Enter some text" id="message" name="message">
<p id="result"></p>
<script>
const message = document.querySelector('#message');
const result = document.querySelector('#result');
message.addEventListener('input', function () {
result.textContent = this.value;
});
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Como funciona:
- Primeiro, selecione o
<input>
elemento com o idmessage
e o<p>
elemento com o idresult
. - Em seguida, anexe um manipulador de eventos ao
input
evento do<input>
elemento. Dentro doinput
manipulador de eventos, atualize a propriedade textContent do<p>
elemento.
Anterior