diff options
Diffstat (limited to 'files/es/web/api/htmlelement/input_event/index.html')
| -rw-r--r-- | files/es/web/api/htmlelement/input_event/index.html | 329 |
1 files changed, 329 insertions, 0 deletions
diff --git a/files/es/web/api/htmlelement/input_event/index.html b/files/es/web/api/htmlelement/input_event/index.html new file mode 100644 index 0000000000..ab082e4a06 --- /dev/null +++ b/files/es/web/api/htmlelement/input_event/index.html @@ -0,0 +1,329 @@ +--- +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><input></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"><input placeholder="Ingrese algún texto" name="nombre"/> +<p id="valores"></p></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><select></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><input></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><input></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><select></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><input></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><input></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> |