EditContext: updateText() 方法

有限可用性

此功能不是基线，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表。

updateText() 方法是 EditContext 接口的一部分，它用于更新 EditContext 对象的内部文本内容。

当用户在关联元素中输入文本时，无需使用此方法。EditContext 对象会自动更新其内部文本内容，并在需要时触发 textupdate 事件。

但是，当用户以其他方式与文本内容交互时，例如从剪贴板粘贴文本时，可以使用此方法。

语法

js
updateText(rangeStart, rangeEnd, text)

参数

rangeStart

表示要替换的文本范围开始位置的数字。

rangeEnd

表示要替换的文本范围结束位置的数字。

text

表示新文本内容的字符串。

异常

  • 如果提供的参数少于三个，则会抛出 TypeError DOMException。
  • 如果 rangeStart 大于 rangeEnd，则会抛出 DOMException。

示例

在用户粘贴文本时更新编辑器

此示例演示了如何在用户按 Ctrl/Cmd + V 快捷键粘贴文本时，使用 updateText 方法更新 <canvas> 元素的 EditContext 中的文本内容。

此示例还使用 Clipboard.readText() 方法从剪贴板读取文本。

html
<canvas id="editor-canvas"></canvas>
js
const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");

const editContext = new EditContext();
canvas.editContext = editContext;

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(editContext.text, 0, 40);
}

editContext.addEventListener("textupdate", (e) => {
  render();
});

canvas.addEventListener("keydown", async (e) => {
  if (e.key == "v" && (e.ctrlKey || e.metaKey)) {
    const pastedText = await navigator.clipboard.readText();
    console.log(
      `The user pasted the text: ${pastedText}. Updating the EditContext text.`,
    );

    editContext.updateText(
      editContext.selectionStart,
      editContext.selectionEnd,
      pastedText,
    );

    editContext.updateSelection(
      editContext.selectionStart + pastedText.length,
      editContext.selectionStart + pastedText.length,
    );

    render();
  }
});

规范

规范
EditContext API
# dom-editcontext-updatetext

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅