From 7c9a0fb74fa05ffaeb94eb4bbc626c91dfa8eb8a Mon Sep 17 00:00:00 2001 From: allo Date: Thu, 3 Mar 2022 13:20:59 +0800 Subject: convert to md and fix live-sample error --- files/zh-cn/web/api/inputevent/inputtype/index.md | 96 +++++++++++------------ 1 file changed, 46 insertions(+), 50 deletions(-) (limited to 'files/zh-cn') diff --git a/files/zh-cn/web/api/inputevent/inputtype/index.md b/files/zh-cn/web/api/inputevent/inputtype/index.md index 5925b3ffba..81542d55d5 100644 --- a/files/zh-cn/web/api/inputevent/inputtype/index.md +++ b/files/zh-cn/web/api/inputevent/inputtype/index.md @@ -3,78 +3,74 @@ title: InputEvent.inputType slug: Web/API/InputEvent/inputType tags: - API + - DOM - DOM Events + - Input - InputEvent + - Property + - Reference + - events - inputType translation_of: Web/API/InputEvent/inputType --- -
{{APIRef("DOM Events")}}
+{{APIRef("DOM Events")}} -

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

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

语法

+## 语法 -
var string = inputEvent.inputType;
+```js +var aString = inputEvent.inputType; +``` -

返回值

+### 返回值 -

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

+一个 {{domxref("DOMString")}} 对象，包含所做输入的类型。有许多可能的值，例如 `insertText`、`deleteContentBackward`、`insertFromPaste` 和 `formatBold`。有关可用输入类型的完整列表，请参阅 [Input Events Level 1 规范的属性部分](https://rawgit.com/w3c/input-events/v1/index.html#interface-InputEvent-Attributes)。 -

示例

+## 示例 -

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

+此示例记录一个可编辑的 {{htmlElement("div")}} 所触发的 [input events](/zh-CN/docs/Web/API/HTMLElement/input_event) 的 `inputType`。 -

HTML

+### 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>
+```html +

Input type:

+
+

Some sample text. Try inserting line breaks, or deleting text in different ways, or pasting different content in.

+
+ +

Another paragraph.

+
+``` -

JavaScript

+### JavaScript -
const log = document.getElementById('log');
+```js
+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> 中的文本，并看看发生了什么事。

+### Result -

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

+尝试编辑 `
` 中的文本，并看看发生了什么事。 -
-

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

-
+{{EmbedLiveSample("示例", '100%', 500)}} -

规范

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

浏览器兼容性

- -
-

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

-
+> **备注：** 有关更详细的示例，请参见 [Masayuki Nakano 的 InputEvent 测试套件](https://d-toybox.com/studio/lib/input_event_viewer.html)。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} -- cgit v1.2.3-54-g00ecf