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
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. Please contribute data for "api.HTMLElement.input" (depth: 1) to the MDN compatibility data repository.
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes)[1] | 9[2][3] | (Yes)[4] | (Yes) |
immediately after compositionupdate |
(Yes) | (Yes) | 12 (12) | (Yes) | 15 | (Yes) |
on contenteditable element |
(Yes) | (Yes) | 14 (14) | Sin soporte | 15 | (Yes) |
when designMode is "on" |
(Yes) | ? | 14 (14) | Sin soporte | 15 | (Yes) |
data |
(Yes) | ? | (Yes) | ? | (Yes) | (Yes) |
isComposing |
(Yes) | ? | 31 (31) | Sin soporte | (Yes) | Sin soporte |
on <select> element |
(Yes) | Sin soporte | 49 (49) | Sin soporte | ? | ? |
on <input> element of type checkbox |
(Yes) | ? | 49 (49) | Sin soporte | (Yes) | (Yes) |
on <input> element of type radio |
(Yes) | ? | 49 (49) | Sin soporte | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | ? | ? | (Yes) |
immediately after compositionupdate |
? | ? | (Yes) | 12.0 (12) | ? | ? | ? |
on contenteditable element |
? | (Yes) | ? | 14.0 (14) | ? | ? | (Yes) |
when designMode is "on" |
? | ? | ? | 14.0 (14) | ? | ? | ? |
data |
? | ? | ? | Sin soporte | ? | ? | ? |
isComposing |
Sin soporte | Sin soporte | ? | 31.0 (31) | Sin soporte | Sin soporte | Sin soporte |
on <select> element |
? | (Yes) | ? | Sin soporte | ? | ? | ? |
on <input> element of type checkbox |
? | ? | ? | ? | ? | ? | ? |
on <input> element of type radio |
? | ? | ? | ? | ? | ? | ? |
[1] Prior to Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), Gecko didn't fire input
events while composition was ongoing using IMEs or when dead keys were used on macOS X.
[2] IE 9 does not fire an input
event when the user deletes characters from an input (e.g. by pressing Backspace or Delete, or using the "Cut" operation).
[3] IE 10 and IE 11 have a bug where the input
event fires on placeholder attribute changes.
[4] Prior to Opera 15, Opera did not fire an input
event after dropping text in an input field.
Ver también
- InputEvent
GlobalEventHandlers.oninput
- Eventos relacionados