Evento input
El evento input
se dispara cuando el valor (value
) de un elemento <input>
, <select>
, o <textarea>
ha sido cambiado.
Burbujas | Yes |
---|---|
Cancelable | No |
Interfaz | InputEvent (en-US) |
Objectivo | Element |
Acción por defecto | None |
Propiedad del manejador del evento | GlobalEventHandlers.oninput |
El evento también aplica a los elementos con la propiedad contenteditable
habilidado, y para cualquier otro elemento cuando la propiedad designMode
esta encendida. En el caso de un contenteditable
y designMode
, el objetivo del evento es el the event target is the editing host. Si estas propiedades aplian a múltiples elementos, el host de edición es el elemento ancestro más cercano cuyo padre no es editable.
Para elementos <input>
con type=checkbox
o type=radio
, el evento input
debería disparar cuando el usuario alterna el control, por la especificación HTML5. Sin embargo, históricamente no siempre es el caso. Revise la compatibilidad o use el evento change (en-US)
en su lugar para estos tipos.
Nota: A diferencia de input
, el evento change (en-US)
no es disparado necesariamente por cada alteración al valor (value
) de un elemento.
Ejemplos
Este ejemplo registra el valor siempre que se cambia el valor del elemento <input>
.
HTML
<input placeholder="Ingrese algún texto" name="nombre"/>
<p id="valores"></p>
JavaScript
const input = document.querySelector('input');
const log = document.getElementById('valores');
input.addEventListener('input', updateValue);
function updateValue(e) {
log.textContent = e.srcElement.value;
}
Resultado
(Funciona en la versión en inglés)
Especificaciones
Especificación | Estado |
---|---|
HTML Living Standard La definición de 'input event' en esta especificación. |
Living Standard |
Document Object Model (DOM) Level 3 Events Specification La definición de 'input event' en esta especificación. |
Obsolete |
Compatibilidad de los navegadores
No compatibility data found for api.HTMLElement.input
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.
Ver también
- InputEvent
GlobalEventHandlers.oninput
- Eventos relacionados