Evento oninput
Definição e uso
O evento oninput ocorre quando o elemento recebe entrada do usuário.
Este evento ocorre quando o valor do elemento <input> ou <textarea> muda.
Dica:Este evento é semelhante a Evento onchange. A diferença está em que o evento oninput ocorre imediatamente após a alteração do valor do elemento, enquanto o onchange ocorre quando o elemento perde o foco e o conteúdo muda. Outra diferença é que o evento onchange também se aplica a elementos <select>.
Exemplo
Exemplo 1
Quando o usuário escreve conteúdo no campo <input>, execute JavaScript:
<input type="text" oninput="myFunction()">
Exemplo 2
Sliders de intervalo - Como atualizar dinamicamente o valor do slider:
<input type="range" oninput="myFunction(this.value)">
Sintaxe
No HTML:
<elemento oninput="myScript">
No JavaScript:
objeto.oninput = function(){myScript};
No JavaScript, use o método addEventListener():
objeto.addEventListener("input", myScript);
Notas:Internet Explorer 8 ou versões anteriores não suportam Método addEventListener().
Detalhes técnicos
| Bubbling: | Suporte |
|---|---|
| Cancelável: | Não suportado |
| Tipo de evento: | Evento, InputEvent |
| Etiquetas 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 Level 3 |
Suporte do navegador
Os números na tabela indicam a primeira versão do navegador que suporta completamente o evento.
| Eventos | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| oninput | Suporte | 9.0 | 4.0 | 5.0 | Suporte |
