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

html
<input placeholder="Ingrese algún texto" name="nombre" />
<p id="valores"></p>

JavaScript

js
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