evento de entrada
Exemplo
Execute um JavaScript quando um usuário escreve algo em um campo <input>:
<input type="text" oninput="myFunction()">
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
O evento oninput ocorre quando um elemento obtém a entrada do usuário.
Este evento ocorre quando o valor de um elemento <input> ou <textarea> é alterado.
Dica: Este evento é semelhante ao evento onchange . A diferença é que o evento oninput ocorre imediatamente após a alteração do valor de um elemento, enquanto onchange ocorre quando o elemento perde o foco, após a alteração do conteúdo. A outra diferença é que o evento onchange também funciona em elementos <select>.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao evento.
Event | |||||
---|---|---|---|---|---|
oninput | Yes | 9.0 | 4.0 | 5.0 | Yes |
Sintaxe
Em HTML:
<element oninput="myScript">
Em JavaScript:
object.oninput = function(){myScript};
Em JavaScript, usando o método addEventListener():
object.addEventListener("input", myScript);
Observação: o método addEventListener() não é compatível com o Internet Explorer 8 e versões anteriores.
Detalhes técnicos
Bolhas: | sim |
---|---|
Cancelável: | Não |
Tipo de evento: | Evento , InputEvent |
Tags HTML suportadas: | <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type=" number">, <input type="password">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, < input type="time">, <input type="url">, <input type="week"> e <textarea> |
Versão DOM: | Eventos de Nível 3 |
Mais exemplos
Exemplo
Controle deslizante de intervalo - como atualizar dinamicamente o valor do controle deslizante:
<input type="range" oninput="myFunction(this.value)">