Evento oninput

Eventos DOM InputEvent

Definición y uso

El evento oninput ocurre cuando el elemento recibe entrada del usuario.

Este evento ocurre cuando cambia el valor de un elemento <input> o <textarea>.

Consejo:Este evento es similar a Evento onchange. La diferencia radica en que el evento oninput ocurre inmediatamente después de que cambia el valor del elemento, mientras que onchange ocurre cuando el elemento pierde el foco y el contenido cambia. Otra diferencia es que el evento onchange también se aplica a los elementos <select>.

Ejemplo

Ejemplo 1

Ejecuta JavaScript cuando el usuario escribe en un campo <input>:

<input type="text" oninput="myFunction()">

Inténtalo tú mismo

Ejemplo 2

Deslizador de rango - Cómo actualizar dinámicamente el valor del deslizador:

<input type="range" oninput="myFunction(this.value)">

Inténtalo tú mismo

Sintaxis

En HTML:

<elemento oninput="myScript">

Inténtalo tú mismo

En JavaScript:

objeto.oninput = function(){myScript};

Inténtalo tú mismo

En JavaScript, utiliza el método addEventListener():

objeto.addEventListener("input", myScript);

Inténtalo tú mismo

Notas:Internet Explorer 8 o versiones anteriores no lo admiten Método addEventListener().

Detalles técnicos

Burbuja: Soporte
Cancelable: No admitido
Tipos de eventos: Evento, InputEvent
Etiquetas HTML admitidas: <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"> y <textarea>
Versión DOM: Eventos de nivel 3

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que primero admite completamente el evento.

Eventos Chrome IE Firefox Safari Opera
oninput Soporte 9.0 4.0 5.0 Soporte
Eventos DOM InputEvent