path: root/files/es/web/api/htmlelement/input_event/index.html

---
title: Evento input
slug: Web/API/HTMLElement/input_event
tags:
  - DOM
  - Evento
  - InputEvent
  - Referencia
translation_of: Web/API/HTMLElement/input_event
---
<div>{{APIRef}}</div>

<p>El evento <strong><code>input</code></strong> se dispara cuando el valor (<code>value</code>) de un elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} ha sido cambiado. </p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Burbujas</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Cancelable</th>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Interfaz</th>
   <td>{{DOMxRef("InputEvent")}}</td>
  </tr>
  <tr>
   <th scope="row">Objectivo</th>
   <td>{{domxref("Element")}}</td>
  </tr>
  <tr>
   <th scope="row">Acción por defecto</th>
   <td>None</td>
  </tr>
  <tr>
   <th scope="row">Propiedad del manejador del evento</th>
   <td>{{domxref("GlobalEventHandlers.oninput")}}</td>
  </tr>
 </tbody>
</table>

<p>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 <code>contenteditable</code> y <code>designMode</code>, el objetivo del evento es el  the event target is the <em>editing host</em>. 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.</p>

<p>Para elementos <code>&lt;input&gt;</code> con <code>type=checkbox</code> o <code>type=radio</code>, el evento <code>input</code> debería disparar cuando el usuario alterna el control, por <a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">la especificación HTML5</a>. Sin embargo, históricamente no siempre es el caso. Revise la compatibilidad o use el evento {{event("change")}} en su lugar para estos tipos.</p>

<div class="blockIndicator note">
<p><strong>Nota:</strong> A diferencia de <code>input</code>, el evento {{event("change")}} no es disparado necesariamente por cada alteración al valor (<code>value</code>) de un elemento.</p>
</div>

<h2 id="Ejemplos">Ejemplos</h2>

<p>Este ejemplo registra el valor siempre que se cambia el valor del elemento {{HtmlElement("input")}}.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;input placeholder="Ingrese algún texto" name="nombre"/&gt;
&lt;p id="valores"&gt;&lt;/p&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">const input = document.querySelector('input');
const log = document.getElementById('valores');

input.addEventListener('input', updateValue);

function updateValue(e) {
  log.textContent = e.srcElement.value;
}</pre>

<h3 id="Resultado">Resultado</h3>

<p>{{EmbedLiveSample("Examples")}}</p>

<p>(Funciona en la versión en inglés)</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>



<p>{{Compat("api.HTMLElement.input")}}</p>

<div class="hidden">
<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>9<sup>[2][3]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>immediately after <code>compositionupdate</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("12")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>15</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>on <code>contenteditable</code> element</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("14")}}</td>
   <td>{{CompatNo}}</td>
   <td>15</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>when <code>designMode</code> is <code>"on"</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("14")}}</td>
   <td>{{CompatNo}}</td>
   <td>15</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>data</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>isComposing</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("31")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>on <code>&lt;select&gt;</code> element</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("49")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>on <code>&lt;input&gt;</code> element of type <code>checkbox</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("49")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>on <code>&lt;input&gt;</code> element of type <code>radio</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("49")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>immediately after <code>compositionupdate</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("12")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>on <code>contenteditable</code> element</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("14")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>when <code>designMode</code> is <code>"on"</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("14")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>data</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>isComposing</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("31")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>on <code>&lt;select&gt;</code> element</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>on <code>&lt;input&gt;</code> element of type <code>checkbox</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>on <code>&lt;input&gt;</code> element of type <code>radio</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, Gecko didn't fire <code>input</code> events while composition was ongoing using IMEs or when dead keys were used on macOS X.</p>

<p>[2] IE 9 does not fire an <code>input</code> event when the user deletes characters from an input (e.g. by pressing Backspace or Delete, or using the "Cut" operation).</p>

<p>[3] IE 10 and IE 11 have a bug where the <code>input</code> event fires on placeholder attribute changes.</p>

<p>[4] Prior to Opera 15, Opera did not fire an <code>input</code> event after dropping text in an input field.</p>
</div>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/InputEvent">InputEvent</a></li>
 <li>{{domxref("GlobalEventHandlers.oninput")}}</li>
 <li>Eventos relacionados
  <ul>
   <li>{{event("beforeinput")}}</li>
   <li>{{event("change")}}</li>
   <li><code><a href="/en-US/docs/Web/API/Constraint_validation/invalid_event">invalid</a></code></li>
  </ul>
 </li>
</ul>