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 |
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 su lugar para estos tipos.
Nota: A diferencia de input
, el evento change
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
Specification |
---|
UI Events # event-type-input |
HTML Standard # handler-oninput |
Compatibilidad de los navegadores
BCD tables only load in the browser
Ver también
- InputEvent
GlobalEventHandlers.oninput
- Eventos relacionados