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 inputevento é acionado sempre que o valor do elemento <input>, <select>ou <textarea>é alterado.
Ao contrário do changeevento que só é acionado quando o valor é confirmado, o inputevento é acionado sempre que o valor é alterado.
Por exemplo, se você estiver digitando no <input>elemento, o elemento disparará o inputevento continuamente. Porém, o changeevento só é acionado quando o <input>elemento perde o foco.
O exemplo a seguir ilustra o inputevento 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 idmessagee o<p>elemento com o idresult. - Em seguida, anexe um manipulador de eventos ao
inputevento do<input>elemento. Dentro doinputmanipulador de eventos, atualize a propriedade textContent do<p>elemento.
Anterior
