EditContext: updateSelection() 方法

有限可用性

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

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

updateSelection() 方法属于 EditContext 接口，用于更新可编辑文本上下文中选区的内部状态。当用户与 EditContext 的关联元素中的文本渲染进行交互时，例如通过单击或拖动鼠标，或使用键盘，此方法用于更新选区状态。

语法

updateSelection(start, end)

参数

start: 表示新选区起始位置的数字。
end: 表示新选区结束位置的数字。

如果 start 和 end 值相同，则选区等效于光标。

异常

如果只提供了一个参数，则会抛出 TypeError DOMException。
如果任一参数不是正数，则会抛出 DOMException。
如果 start 大于 end，则会抛出 DOMException。

示例

在用户与文本交互时更新选区

此示例演示了如何使用 updateSelection 方法，在使用箭头键移动光标或在可编辑区域中选择文本时，更新 canvas 元素的 EditContext 中的选区。

html

<canvas id="editor-canvas"></canvas>

const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

canvas.addEventListener("keydown", (e) => {
  if (e.key == "ArrowLeft") {
    const newPosition = Math.max(editContext.selectionStart - 1, 0);

    if (e.shiftKey) {
      editContext.updateSelection(newPosition, editContext.selectionEnd);
    } else {
      editContext.updateSelection(newPosition, newPosition);
    }
  } else if (e.key == "ArrowRight") {
    const newPosition = Math.min(
      editContext.selectionEnd + 1,
      editContext.text.length,
    );

    if (e.shiftKey) {
      editContext.updateSelection(editContext.selectionStart, newPosition);
    } else {
      editContext.updateSelection(newPosition, newPosition);
    }
  }

  console.log(
    `The new EditContext selection is ${editContext.selectionStart}, ${editContext.selectionEnd}`,
  );
});

规范

规范
EditContext API # dom-editcontext-updateselection

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

它所属的 EditContext 接口。