EditContext: свойство text

Только для чтения свойство text интерфейса EditContext представляет собой редактируемое содержимое элемента.

Строка, содержащая текущее редактируемое содержимое элемента, прикрепленного к объекту EditContext. Его начальное значение — пустая строка.

Эта строка может или не может быть равна значению свойства textContent элемента DOM, связанного с EditContext. Например, связанный элемент может быть элементом <canvas>, у которого нет свойства textContent. Или же связанный элемент может быть элементом <div>, содержащим текст, отличающийся от значения EditContext.text, для более сложного рендеринга.

Свойство text объекта EditContext может использоваться в качестве модели для области редактирования текста. Другие свойства объекта EditContext, такие как selectionStart и selectionEnd, относятся к смещениям в строке text.

В следующем примере API EditContext используется для рендеринга текста, введённого пользователем в элементе <canvas>.

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

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
const editContext = new EditContext();
canvas.editContext = editContext;

editContext.addEventListener("textupdate", (e) => {
  // When the user has focus on the <canvas> and enters text,
  // this event is fired, and we use it to re-render the text.
  console.log(
    `The user entered the text: ${e.text}. Re-rendering the full EditContext text`,
  );
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(editContext.text, 10, 10);
});