TextUpdateEvent: selectionEnd property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Thuộc tính chỉ đọc TextUpdateEvent.selectionEnd cho biết vị trí kết thúc của vùng chọn (hoặc con trỏ) trong nội dung văn bản của vùng có thể chỉnh sửa được gắn với đối tượng EditContext.

Giá trị

Một Number.

Ví dụ

Sử dụng `textupdate` để hiển thị văn bản đã chỉnh sửa và vùng chọn người dùng

Ví dụ này cho thấy cách sử dụng thuộc tính selectionEnd để hiển thị văn bản được chọn trong trình xử lý sự kiện textupdate.

css

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

.selection {
  display: inline-block;
  vertical-align: bottom;
  background: blue;
  color: white;
  min-width: 2px;
  height: 3ex;
}

html

<div id="editor"></div>

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}`);
});