El evento input se dispara cuando el valor (value) de un elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} ha sido cambiado.
| Burbujas | Yes |
|---|---|
| Cancelable | No |
| Interfaz | {{DOMxRef("InputEvent")}} |
| Objectivo | {{domxref("Element")}} |
| Acción por defecto | None |
| Propiedad del manejador del evento | {{domxref("GlobalEventHandlers.oninput")}} |
El evento también aplica a los elementos con la propiedad {{domxref("HTMLElement.contentEditable", "contenteditable")}} habilidado, y para cualquier otro elemento cuando la propiedad {{domxref("Document.designMode", "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 {{event("change")}} en su lugar para estos tipos.
Nota: A diferencia de input, el evento {{event("change")}} no es disparado necesariamente por cada alteración al valor (value) de un elemento.
Este ejemplo registra el valor siempre que se cambia el valor del elemento {{HtmlElement("input")}}.
<input placeholder="Ingrese algún texto" name="nombre"/> <p id="valores"></p>
const input = document.querySelector('input');
const log = document.getElementById('valores');
input.addEventListener('input', updateValue);
function updateValue(e) {
log.textContent = e.srcElement.value;
}
{{EmbedLiveSample("Examples")}}
(Funciona en la versión en inglés)
| Especificación | Estado |
|---|---|
| {{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}} | {{Spec2('HTML WHATWG')}} |
| {{SpecName('DOM3 Events', "#event-type-input", "input event")}} | {{Spec2('DOM3 Events')}} |
{{Compat("api.HTMLElement.input")}}
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}}[1] | 9[2][3] | {{CompatVersionUnknown}}[4] | {{CompatVersionUnknown}} |
immediately after compositionupdate |
{{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatGeckoDesktop("12")}} | {{CompatVersionUnknown}} | 15 | {{CompatVersionUnknown}} |
on contenteditable element |
{{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatGeckoDesktop("14")}} | {{CompatNo}} | 15 | {{CompatVersionUnknown}} |
when designMode is "on" |
{{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatGeckoDesktop("14")}} | {{CompatNo}} | 15 | {{CompatVersionUnknown}} |
data |
{{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
isComposing |
{{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatGeckoDesktop("31")}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} |
on <select> element |
{{CompatVersionUnknown}} | {{CompatNo}} | {{CompatGeckoDesktop("49")}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} |
on <input> element of type checkbox |
{{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatGeckoDesktop("49")}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
on <input> element of type radio |
{{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatGeckoDesktop("49")}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} |
immediately after compositionupdate |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatGeckoMobile("12")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
on contenteditable element |
{{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatGeckoMobile("14")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} |
when designMode is "on" |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatGeckoMobile("14")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
data |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
isComposing |
{{CompatNo}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatGeckoMobile("31")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
on <select> element |
{{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
on <input> element of type checkbox |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
on <input> element of type radio |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
[1] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, 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.
invalid