TextEvent

已弃用： 不再推荐使用此功能。尽管某些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被弃用，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅此页面底部的兼容性表以指导您的决策。请注意，此功能可能随时停止工作。

TextEvent 接口是用于报告文本 UI 元素更改的旧版 UI 事件接口。

注意：TextEvent 事件已被诸如input、beforeinput、keypress、keyup 和keydown 等事件取代。

实例属性

此接口还继承了其父级UIEvent的属性，并间接继承了Event的属性。

TextEvent.data 只读已弃用: 指示与事件关联的数据。

实例方法

TextEvent.initTextEvent() 已弃用: 使用给定参数填充此（新）TextEvent 的值。

事件列表

以下是所有TextEvent 事件的列表

textinput

示例

侦听文本输入事件

您可以使用EventTarget.addEventListener() 注册文本输入事件的侦听器，如下所示

element.addEventListener(
  "textInput",
  (event) => {
    // …
  },
  false,
);

显示输入事件的简单日志

此示例侦听在输入上触发的多个事件，包括textInput。事件类型和事件数据将被记录，允许您查看textInput 在其他事件（例如由按键生成的事件）中发射的位置。

HTML

html

<input placeholder="Enter some text" name="name" />

<pre id="log"></pre>

#log {
  height: 140px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const input = document.querySelector("input");

input.addEventListener("keypress", updateValue);
input.addEventListener("keyup", updateValue);
input.addEventListener("keydown", updateValue);
input.addEventListener("input", updateValue);
input.addEventListener("beforeinput", updateValue);
input.addEventListener("textInput", updateValue);

function updateValue(e) {
  log(`${e.type}: ${e.data}`);
}

结果

规范

规范
UI 事件 # legacy-textevent-events

浏览器兼容性

BCD 表仅在浏览器中加载