From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:41:45 -0500
Subject: initial commit

---
 .../es/web/api/htmlelement/input_event/index.html  | 329 +++++++++++++++++++++
 1 file changed, 329 insertions(+)
 create mode 100644 files/es/web/api/htmlelement/input_event/index.html

(limited to 'files/es/web/api/htmlelement/input_event')

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>&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>
-- 
cgit v1.2.3-54-g00ecf