TextUpdateEvent：selectionEnd 属性

有限可用性

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

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

TextUpdateEvent.selectionEnd 只读属性指示与EditContext对象关联的可编辑区域文本内容中选择（或插入符号）结束的位置。

值

一个Number。

示例

使用 textupdate 呈现已编辑文本和用户选择

此示例演示了如何使用 selectionEnd 属性在textupdate 事件处理程序中呈现选定的文本。

css
#editor {
  height: 200px;
  background: #eee;
  color: black;
}

.selection {
  display: inline-block;
  vertical-align: bottom;
  background: blue;
  color: white;
  min-width: 2px;
  height: 3ex;
}
html
<div id="editor"></div>
js
const editorEl = document.getElementById("editor");
const editContext = new EditContext();
editorEl.editContext = editContext;

editContext.addEventListener("textupdate", (e) => {
  // Clear the current content.
  editorEl.textContent = "";

  const text = editContext.text;
  const { selectionStart, selectionEnd } = e;

  // Render the text before the selection.
  const textBefore = document.createElement("span");
  textBefore.textContent = text.substring(0, selectionStart);

  // Render the selected text, or caret.
  const textSelected = document.createElement("span");
  textSelected.classList.add("selection");
  textSelected.textContent = text.substring(selectionStart, selectionEnd);

  // Render the text after the selection.
  const textAfter = document.createElement("span");
  textAfter.textContent = text.substring(selectionEnd);

  editorEl.appendChild(textBefore);
  editorEl.appendChild(textSelected);
  editorEl.appendChild(textAfter);

  console.log(`Text before selection: ${textBefore.textContent}`);
  console.log(`Selected text: ${textSelected.textContent}`);
  console.log(`Text after selection: ${textAfter.textContent}`);
});

规范

规范
EditContext API
# dom-textupdateevent-selectionend

浏览器兼容性

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