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/api/inputevent/data/index.html | 69 ++++++++++++++++ .../web/api/inputevent/datatransfer/index.html | 72 ++++++++++++++++ files/zh-cn/web/api/inputevent/index.html | 61 ++++++++++++++ .../zh-cn/web/api/inputevent/inputevent/index.html | 50 +++++++++++ .../zh-cn/web/api/inputevent/inputtype/index.html | 82 ++++++++++++++++++ .../web/api/inputevent/iscomposing/index.html | 96 ++++++++++++++++++++++ 6 files changed, 430 insertions(+) create mode 100644 files/zh-cn/web/api/inputevent/data/index.html create mode 100644 files/zh-cn/web/api/inputevent/datatransfer/index.html create mode 100644 files/zh-cn/web/api/inputevent/index.html create mode 100644 files/zh-cn/web/api/inputevent/inputevent/index.html create mode 100644 files/zh-cn/web/api/inputevent/inputtype/index.html create mode 100644 files/zh-cn/web/api/inputevent/iscomposing/index.html (limited to 'files/zh-cn/web/api/inputevent') diff --git a/files/zh-cn/web/api/inputevent/data/index.html b/files/zh-cn/web/api/inputevent/data/index.html new file mode 100644 index 0000000000..278695993d --- /dev/null +++ b/files/zh-cn/web/api/inputevent/data/index.html @@ -0,0 +1,69 @@ +--- +title: InputEvent.data +slug: Web/API/InputEvent/data +tags: + - API + - DOM Events + - InputEvent + - data +translation_of: Web/API/InputEvent/data +--- +

{{SeeCompatTable}}{{APIRef("DOM Events")}}

+ +
+

请注意，data 属性在使用键盘输入时会返回输入的字符内容，但在粘贴、拖动时可能会返回 null，这取决于浏览器。浏览器也可能把一些数据保存在 {{domxref("InputEvent.dataTransfer")}}，而不是该 data 属性中。

+
+ +

{{domxref("InputEvent")}} 接口中的只读属性 data 返回含有插入字符数据的 {{domxref("DOMString")}}。如果更改未插入文本（例如删除字符时），则其可能为空字符串。

+ +

语法

+ +
var string = inputEvent.data;
+ +

返回值

+ +

一个 {{domxref("DOMString")}}。

+ +

示例

+ +

在下面的简单示例中，我们在 input 事件上设置了一个事件监听器，以便在对 {{htmlelement("input")}} 元素的内容进行任何更改时（通过键入或粘贴），通过 InputEvent.data 属性检索添加的文本，并在 <input> 下面的段落中报告。

+ +
<p>Some text to copy and paste.</p>
+
+<input type="text">
+
+<p class="result"></p>
+ +
var editable = document.querySelector('input')
+var result = document.querySelector('.result');
+
+editable.addEventListener('input', (e) => {
+  result.textContent = "Inputted text: " + e.data;
+});
+ +

{{EmbedLiveSample('Examples')}}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('InputEvents2','#dfn-data','data')}}{{Spec2('InputEvents2')}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.InputEvent.data")}}

+
diff --git a/files/zh-cn/web/api/inputevent/datatransfer/index.html b/files/zh-cn/web/api/inputevent/datatransfer/index.html new file mode 100644 index 0000000000..9f53b7091a --- /dev/null +++ b/files/zh-cn/web/api/inputevent/datatransfer/index.html @@ -0,0 +1,72 @@ +--- +title: InputEvent.dataTransfer +slug: Web/API/InputEvent/dataTransfer +tags: + - API + - DOM Events + - DataTransfer + - InputEvent +translation_of: Web/API/InputEvent/dataTransfer +--- +

{{SeeCompatTable}}{{APIRef("DOM Events")}}

+ +

{{domxref("InputEvent")}} 接口中的只读属性 dataTransfer 返回一个 {{domxref("DataTransfer")}} 对象，该对象包含有关要添加到可编辑内容，或从可编辑内容中删除的富文本或纯文本数据的信息。

+ +

语法

+ +
var dataTransfer = inputEvent.dataTransfer
+ +

返回值

+ +

一个 {{domxref("DataTransfer")}} 对象。

+ +

示例

+ +

在下面的简单示例中，我们在 input 事件上设置了一个事件监听器，以便在将任何内容粘贴到 {{htmlelement("p")}} 元素时，通过 InputEvent.dataTransfer.getData() 方法检索其HTML源代码，并在输入框下面的段落中报告。

+ +

尝试复制并粘贴提供的部分内容以查看效果。注意，部分浏览器对其支持不佳。

+ +
<p><span style="font-weight: bold; color: blue">Whoa, bold blue text!</span></p>
+<p><span style="font-weight: italic; color: red">Exciting: italic red text!</span></p>
+<p>Boring normal text ;-(</p>
+
+<hr>
+
+<p contenteditable="true">Go on, try pasting some content into this editable paragraph and see what happens!</p>
+
+<p class="result"></p>
+ +
var editable = document.querySelector('p[contenteditable]');
+var result = document.querySelector('.result')
+var dataTransferObj;
+
+editable.addEventListener('input', (e) => {
+  result.textContent = e.dataTransfer.getData('text/html');
+});
+ +

{{EmbedLiveSample('Examples', '100%', 250)}}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('InputEvents2','#dom-inputevent-datatransfer','dataTransfer')}}{{Spec2('InputEvents2')}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.InputEvent.dataTransfer")}}

+
diff --git a/files/zh-cn/web/api/inputevent/index.html b/files/zh-cn/web/api/inputevent/index.html new file mode 100644 index 0000000000..a0f8caeb80 --- /dev/null +++ b/files/zh-cn/web/api/inputevent/index.html @@ -0,0 +1,61 @@ +--- +title: InputEvent +slug: Web/API/InputEvent +translation_of: Web/API/InputEvent +--- +

{{APIRef("DOM Events")}}

+
{{SeeCompatTable}}<
+

InputEvent 接口用来构造和字符输入相关的事件对象。

+ +

构造函数

+ +
+
{{domxref("InputEvent.InputEvent", "InputEvent()")}}
+
创建一个 InputEvent 对象。
+
+ +

属性

+ +

除继承自 {{domxref("UIEvent")}} 和 {{domxref("Event")}} 接口的属性外，还有以下属性：

+ +
+
{{domxref("InputEvent.data")}} {{readOnlyInline}}
+
返回当前输入的字符串，如果是删除操作，则该值为空字符串。
+
{{domxref("InputEvent.isComposing")}}{{readOnlyInline}}
+
返回一个布尔值，表明该事件是在触发 {{event("compositionstart")}} 事件之后且触发 {{event("compositionend")}} 事件之前触发的，也就是表明当前输入的字符是输入法的中途输入。
+
+ +

方法

+ +

除继承自 {{domxref("UIEvent")}} 和 {{domxref("Event")}} 接口的方法外，没有其它自身方法。

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#interface-InputEvent','InputEvent')}}{{Spec2('DOM3 Events')}}Initial definition.
+ +

浏览器兼容性

+ +

{{Compat("api.InputEvent")}}

+ + +

相关链接

+ + diff --git a/files/zh-cn/web/api/inputevent/inputevent/index.html b/files/zh-cn/web/api/inputevent/inputevent/index.html new file mode 100644 index 0000000000..9d6227b309 --- /dev/null +++ b/files/zh-cn/web/api/inputevent/inputevent/index.html @@ -0,0 +1,50 @@ +--- +title: InputEvent() +slug: Web/API/InputEvent/InputEvent +tags: + - API + - Constructor + - DOM + - DOM Events + - InputEvent +translation_of: Web/API/InputEvent/InputEvent +--- +

{{APIRef("DOM Events")}}{{SeeCompatTable}}

+ +

构造函数 InputEvent() 返回一个新创建的 {{domxref("InputEvent")}} 对象。

+ +

语法

+ +
 event = new InputEvent(typeArg, inputEventInit);
+ +

参数

+ +
+
typeArg
+
一个 {{domxref("DOMString")}} ，表示事件的名称。
+
inputEventInit{{optional_inline}}
+
+ +

一个 InputEventInit 字典，有以下字段:

+ + + +

InputEventInit 字典也接受来自 {{domxref("UIEvent.UIEvent", "UIEventInit")}} 以及 {{domxref("Event.Event", "EventInit")}} 字典的值。

+ +

浏览器兼容性

+ + + +

{{Compat("api.InputEvent.InputEvent")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/api/inputevent/inputtype/index.html b/files/zh-cn/web/api/inputevent/inputtype/index.html new file mode 100644 index 0000000000..91136e1ed5 --- /dev/null +++ b/files/zh-cn/web/api/inputevent/inputtype/index.html @@ -0,0 +1,82 @@ +--- +title: InputEvent.inputType +slug: Web/API/InputEvent/inputType +tags: + - API + - DOM Events + - InputEvent + - inputType +translation_of: Web/API/InputEvent/inputType +--- +
{{APIRef("DOM Events")}}
+ +

{{domxref("InputEvent")}} 接口中的只读属性 inputType 返回对可编辑内容所做更改的类型。可能的更改包括插入、删除和格式化文本。

+ +

语法

+ +
var string = inputEvent.inputType;
+ +

返回值

+ +

一个 {{domxref("DOMString")}} 对象，包含所做输入的类型。有许多可能的值，例如insertText、deleteContentBackward、insertFromPaste和formatBold。有关可用输入类型的完整列表，请参阅 Input Events Level 1 规范的属性部分。

+ +

示例

+ +

此实例记录 input events 的 inputType，在一个可编辑的 {{htmlElement("div")}} 中。

+ +

HTML

+ +
<p id="log">Input type: </p>
+<div contenteditable="true" style="margin: 20px;padding: 20px;border:2px dashed red;">
+  <p>Some sample text. Try inserting line breaks, or deleting text in different ways, or pasting different content in.</p>
+  <hr>
+  <ul>
+    <li>A sample</li>
+    <li>bulleted</li>
+    <li>list.</li>
+  </ul>
+  <p>Another paragraph.</p>
+</div>
+ +

JavaScript

+ +
const log = document.getElementById('log');
+const editable = document.querySelector('div[contenteditable]');
+editable.addEventListener('input', logInputType);
+
+function logInputType(event) {
+  log.textContent = `Input type: ${event.inputType}`;
+}
+ +

尝试编辑 <div> 中的文本，并看看发生了什么事。

+ +

{{EmbedLiveSample("Examples", '100%', 500)}}

+ +
+

注：有关更详细的示例，请参见 Masayuki Nakano的InputEvent测试套件。

+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('UI Events','#dom-inputevent-inputtype','inputType')}}{{Spec2('UI Events')}}
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.InputEvent.inputType")}}

+
diff --git a/files/zh-cn/web/api/inputevent/iscomposing/index.html b/files/zh-cn/web/api/inputevent/iscomposing/index.html new file mode 100644 index 0000000000..c427a7ba50 --- /dev/null +++ b/files/zh-cn/web/api/inputevent/iscomposing/index.html @@ -0,0 +1,96 @@ +--- +title: InputEvent.isComposing +slug: Web/API/InputEvent/isComposing +translation_of: Web/API/InputEvent/isComposing +--- +

{{APIRef("DOM Events")}}

+ +

The InputEvent.isComposing read-only property returns a {{jsxref("Boolean")}} value indicating if the event is fired after {{event("compositionstart")}} and before {{event("compositionend")}}.

+ +

这是一个只读属性，返回boolean类型。表示正处于输入事件的开始与结束之间，表示正在输入状态。

+ +

Syntax

+ +
var bool = event.isComposing;
+ +

Example

+ +
var inputEvent = new InputEvent("syntheticInput", false);
+console.log(inputEvent.isComposing); // return false
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-InputEvent-isComposing','InputEvent.isComposing')}}{{Spec2('DOM3 Events')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatNo() }}{{ CompatGeckoDesktop("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatGeckoMobile("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf