TextUpdateEvent

Интерфейс TextUpdateEvent — это событие DOM, представляющее обновление текста или выделения в области редактируемого текста, связанной с экземпляром EditContext.

Этот интерфейс наследует свойства от Event.

TextUpdateEvent() Экспериментально

Создаёт новый объект TextUpdateEvent.

TextUpdateEvent.updateRangeStart Только для чтения Экспериментально

Возвращает индекс первой символа в обновлённом диапазоне текста.

TextUpdateEvent.updateRangeEnd Только для чтения Экспериментально

Возвращает индекс последнего символа в обновлённом диапазоне текста.

TextUpdateEvent.text Только для чтения Экспериментально

Возвращает текст, вставленный в обновлённый диапазон.

TextUpdateEvent.selectionStart Только для чтения Экспериментально

Возвращает индекс первого символа в новом диапазоне выделения после обновления.

TextUpdateEvent.selectionEnd Только для чтения Экспериментально

Возвращает индекс последнего символа в новом диапазоне выделения после обновления.

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

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

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

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

  // Render the text.
  ctx.fillText(editContext.text, 10, 10);
}

editContext.addEventListener("textupdate", (e) => {
  // Re-render the editor view when the user is entering text.
  render();

  console.log(
    `The user entered ${e.text}. Rendering the entire text: ${editContext.text}`,
  );
});