Evento de entrada
Ejemplo
Ejecute un JavaScript cuando un usuario escriba algo en un campo <input>:
<input type="text" oninput="myFunction()">
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El evento oninput ocurre cuando un elemento recibe la entrada del usuario.
Este evento ocurre cuando se cambia el valor de un elemento <input> o <textarea>.
Sugerencia: este evento es similar al evento onchange . La diferencia es que el evento oninput ocurre inmediatamente después de que el valor de un elemento ha cambiado, mientras que onchange ocurre cuando el elemento pierde el foco, después de que se haya cambiado el contenido. La otra diferencia es que el evento onchange también funciona en elementos <select>.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el evento.
| Event | |||||
|---|---|---|---|---|---|
| oninput | Yes | 9.0 | 4.0 | 5.0 | Yes |
Sintaxis
En HTML:
<element oninput="myScript">
En JavaScript:
object.oninput = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("input", myScript);
Nota: el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| Burbujas: | sí |
|---|---|
| Cancelable: | No |
| Tipo de evento: | Evento , Evento de entrada |
| Etiquetas HTML compatibles: | <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type=" número">, <tipo de entrada="contraseña">, <tipo de entrada="rango">, <tipo de entrada="buscar">, <tipo de entrada="tel">, <tipo de entrada="texto">, < tipo de entrada="tiempo">, <tipo de entrada="url">, <tipo de entrada="semana"> y <área de texto> |
| Versión DOM: | Eventos de nivel 3 |
Más ejemplos
Ejemplo
Control deslizante de rango: cómo actualizar dinámicamente el valor del control deslizante:
<input type="range" oninput="myFunction(this.value)">