EditContext：selectionStart 属性

可用性有限

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

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

selectionStart是EditContext的只读属性，它指的是当前选中文本内容中选区开始处的偏移量。

值

一个Number

示例

使用 selectionStart 在可编辑画布中渲染用户选区

此示例演示如何使用 selectionStart 和 selectionEnd 属性在与 EditContext 关联的 <canvas> 元素中绘制当前选区。

html
<canvas id="editor-canvas"></canvas>
js
const ANCHOR_X = 10;
const ANCHOR_Y = 30;
const FONT_SIZE = 20;

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
ctx.font = `${FONT_SIZE}px Arial`;

const editContext = new EditContext({
  text: "Hello world!",
  selectionStart: 6,
  selectionEnd: 11,
});
canvas.editContext = editContext;

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Render the entire text content first.
  ctx.fillStyle = "black";
  ctx.fillText(editContext.text, ANCHOR_X, ANCHOR_Y);

  // Get the width from the start of the text to the start of the selection.
  const selectionStartX = ctx.measureText(
    editContext.text.substring(0, editContext.selectionStart),
  );

  // Get the width of the selection.
  const selectionWidth = ctx.measureText(
    editContext.text.substring(
      editContext.selectionStart,
      editContext.selectionEnd,
    ),
  );

  // Draw a rectangle on top of the text to represent the selection.
  ctx.fillStyle = "blue";
  ctx.fillRect(
    selectionStartX.width + ANCHOR_X,
    ANCHOR_Y - FONT_SIZE,
    selectionWidth.width,
    FONT_SIZE,
  );

  // Re-render just the selected text in white, over the rectangle.
  ctx.fillStyle = "white";
  ctx.fillText(
    editContext.text.substring(
      editContext.selectionStart,
      editContext.selectionEnd,
    ),
    selectionStartX.width + ANCHOR_X,
    ANCHOR_Y,
  );
}

render();

规范

规范
EditContext API
# dom-editcontextinit-selectionstart

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。