aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/events/input/index.html
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
commit310fd066e91f454b990372ffa30e803cc8120975 (patch)
treed5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/events/input/index.html
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz
translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2
translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/events/input/index.html')
-rw-r--r--files/zh-cn/web/events/input/index.html157
1 files changed, 0 insertions, 157 deletions
diff --git a/files/zh-cn/web/events/input/index.html b/files/zh-cn/web/events/input/index.html
deleted file mode 100644
index 7ee1b98ad5..0000000000
--- a/files/zh-cn/web/events/input/index.html
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: input
-slug: Web/Events/input
-tags:
- - HTML DOM
- - HTMLElement
- - Input
- - 事件
- - 参考
- - 表单
- - 输入
-translation_of: Web/API/HTMLElement/input_event
----
-<p>{{APIRef}}</p>
-
-<p>当一个 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 <code>value</code> 被修改时,会触发 <strong><code>input</code></strong> 事件。</p>
-
-<table class="properties">
- <tbody>
- <tr>
- <th scope="row">Bubbles</th>
- <td>Yes</td>
- </tr>
- <tr>
- <th scope="row">Cancelable</th>
- <td>No</td>
- </tr>
- <tr>
- <th scope="row">Interface</th>
- <td>{{DOMxRef("InputEvent")}}</td>
- </tr>
- <tr>
- <th scope="row">Event handler property</th>
- <td>{{domxref("GlobalEventHandlers.oninput")}}</td>
- </tr>
- </tbody>
-</table>
-
-<p><strong><code>input</code></strong> 事件也适用于启用了 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 的元素,以及开启了 {{domxref("Document.designMode", "designMode")}} 的任意元素。在<code>contenteditable</code> 和 <code>designMode</code> 的情况下,事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上,当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。</p>
-
-<p>对于 <code>type=checkbox</code> 或 <code>type=radio</code> 的 <code>input</code> 元素,每当用户切换控件(通过触摸、鼠标或键盘)时(<a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">HTML5规范</a>),<code>input</code> 事件都应该触发。然而,历史事实并非如此。请检查兼容性,或使用 {{event("change")}} 事件代替这些类型的元素。</p>
-
-<div class="blockIndicator note">
-<p><strong>注意:</strong> 每当元素的 <code>value</code> 改变,<code>input</code> 事件都会被触发。这与 {{domxref("HTMLInputElement.change_event", "change")}} 事件不同。change 事件仅当 value 被提交时触发,如按回车键,从一个 options 列表中选择一个值等。</p>
-</div>
-
-<h2 id="示例">示例</h2>
-
-<p>每当用户修改 {{HtmlElement("input")}} 元素的 value 时,这个示例会记录 value。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html"><code>&lt;input placeholder="Enter some text" name="name"/&gt;
-&lt;p id="values"&gt;&lt;/p&gt;</code></pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js"><code>const input = document.querySelector('input');
-const log = document.getElementById('values');
-
-input.addEventListener('input', updateValue);
-
-function updateValue(e) {
- log.textContent = e.srcElement.value;
-}</code>
-</pre>
-
-<h3 id="结果">结果</h3>
-
-<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLElement/input_event$samples/Examples?revision=1609143"></iframe></p>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Specification</th>
- <th scope="col">Status</th>
- </tr>
- </thead>
- <tbody>
- <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="属性">属性</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Property</th>
- <th scope="col">Type</th>
- <th scope="col">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>target</code> {{readonlyInline}}</td>
- <td>{{domxref("EventTarget")}}</td>
- <td>The event target (the topmost target in the DOM tree).</td>
- </tr>
- <tr>
- <td><code>type</code> {{readonlyInline}}</td>
- <td>{{domxref("DOMString")}}</td>
- <td>The type of event.</td>
- </tr>
- <tr>
- <td><code>bubbles</code> {{readonlyInline}}</td>
- <td>{{jsxref("Boolean")}}</td>
- <td>Whether the event normally bubbles or not.</td>
- </tr>
- <tr>
- <td><code>cancelable</code> {{readonlyInline}}</td>
- <td>{{jsxref("Boolean")}}</td>
- <td>Whether the event is cancellable or not.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<p>{{Compat("api.HTMLElement.input_event")}}</p>
-
-<div id="compat-desktop"></div>
-
-<p>[1] 在 Gecko 12.0 {{geckoRelease("12.0")}} 之前,用户在输入法中输入时,或者 dead keys were used on Mac OS X 时,Gecko 不触发 input 事件。</p>
-
-<p>[2] IE 9 在用户删除输入的文字时不触发 input 事件(例如,按 Backspace 或者删除键,或者“剪切”文字).</p>
-
-<p>[3] Opera 在用户把文字拖进输入框时,不触发 input 事件。</p>
-
-<p>[4] 事件 target 是光标所在的最内侧的元素。</p>
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li>{{event("keydown")}}</li>
- <li>{{event("keyup")}}</li>
- <li>{{event("keypress")}}</li>
- <li>{{event("input")}}</li>
- <li>{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}</li>
- <li>{{domxref("HTMLElement/change_event", "change")}}</li>
- <li>{{domxref("HTMLInputElement/invalid_event", "invalid")}}</li>
-</ul>
-
-<p>此外,还有一个类似的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change">change</a></code> 事件。change 触发的频率低于 <code>input</code> - 它只会在用户提交更改时触发。</p>
-
-<p>
- <audio style="display: none;"></audio>
-</p>