InputEvent:inputType 属性

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

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

一个包含所做输入的类型的字符串。有许多可能的值,例如 insertTextdeleteContentBackwardinsertFromPasteformatBold。有关可用输入类型的完整列表,请参阅 Input Events Level 2 规范的属性部分

示例

此示例记录一个可编辑的 <div> 所触发的 input 事件inputType

HTML

html
<p id="log">Input type:</p>
<div
  contenteditable="true"
  style="margin: 20px;padding: 20px;border:2px dashed red;">
  <p>一些示例文本。尝试插入换行符,或以不同方式删除文本,或粘贴不同内容。</p>
  <hr />
  <ul>
    <li>一个例子</li>
    <li>项目符号</li>
    <li>列表</li>
  </ul>
  <p>另一个段落。</p>
</div>

JavaScript

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> 中的文本,并看看发生了什么事。

备注: 有关更详细的示例,请参见 Masayuki Nakano 的 InputEvent 测试套件

规范

Specification
UI Events
# dom-inputevent-inputtype

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inputType
insertFromPasteAsQuotation input type
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.