From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/events/input/index.html | 157 ++++++++++++++++++++++++++++++++ 1 file changed, 157 insertions(+) create mode 100644 files/zh-cn/web/events/input/index.html (limited to 'files/zh-cn/web/events/input') diff --git a/files/zh-cn/web/events/input/index.html b/files/zh-cn/web/events/input/index.html new file mode 100644 index 0000000000..7ee1b98ad5 --- /dev/null +++ b/files/zh-cn/web/events/input/index.html @@ -0,0 +1,157 @@ +--- +title: input +slug: Web/Events/input +tags: + - HTML DOM + - HTMLElement + - Input + - 事件 + - 参考 + - 表单 + - 输入 +translation_of: Web/API/HTMLElement/input_event +--- +

{{APIRef}}

+ +

当一个 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 value 被修改时，会触发 input 事件。

+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableNo
Interface{{DOMxRef("InputEvent")}}
Event handler property{{domxref("GlobalEventHandlers.oninput")}}
+ +

input 事件也适用于启用了 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 的元素，以及开启了 {{domxref("Document.designMode", "designMode")}} 的任意元素。在contenteditable 和 designMode 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。

+ +

对于 type=checkbox 或 type=radio 的 input 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（HTML5规范），input 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 {{event("change")}} 事件代替这些类型的元素。

+ +
+

注意： 每当元素的 value 改变，input 事件都会被触发。这与 {{domxref("HTMLInputElement.change_event", "change")}} 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。

+
+ +

示例

+ +

每当用户修改 {{HtmlElement("input")}} 元素的 value 时，这个示例会记录 value。

+ +

HTML

+ +
<input placeholder="Enter some text" name="name"/>
+<p id="values"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('input', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.srcElement.value;
+}
+
+ +

结果

+ +

+ +

规范

+ + + + + + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM3 Events', "#event-type-input", "input event")}}{{Spec2('DOM3 Events')}}
+ +

属性

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

浏览器兼容性

+ +

{{Compat("api.HTMLElement.input_event")}}

+ +
+ +

[1] 在 Gecko 12.0 {{geckoRelease("12.0")}} 之前，用户在输入法中输入时，或者 dead keys were used on Mac OS X 时，Gecko 不触发 input 事件。

+ +

[2] IE 9 在用户删除输入的文字时不触发 input 事件(例如，按 Backspace 或者删除键，或者“剪切”文字).

+ +

[3] Opera 在用户把文字拖进输入框时，不触发 input 事件。

+ +

[4] 事件 target 是光标所在的最内侧的元素。

+ +

参见

+ + + +

此外，还有一个类似的 change 事件。change 触发的频率低于 input - 它只会在用户提交更改时触发。

+ +

+ +

-- cgit v1.2.3-54-g00ecf