EditContext: событие textupdate

Событие textupdate интерфейса EditContext срабатывает, когда пользователь вносит изменения в текст или выделение редактируемой области, присоединённой к экземпляру EditContext.

Это событие позволяет отобразить обновлённый текст и выделение в пользовательском интерфейсе в ответ на ввод пользователя.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика события.

addEventListener("textupdate", (event) => {});

ontextupdate = (event) => {};

Объект TextUpdateEvent. Наследуется от Event.

В дополнение к перечисленным ниже свойствам доступны свойства из родительского интерфейса Event.

TextUpdateEvent.updateRangeStart Только для чтения

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

TextUpdateEvent.updateRangeEnd Только для чтения

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

TextUpdateEvent.text Только для чтения

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

TextUpdateEvent.selectionStart Только для чтения

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

TextUpdateEvent.selectionEnd Только для чтения

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

В следующем примере событие textupdate 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} at ${e.updateRangeStart}. Re-rendering the full EditContext text`,
  );
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(editContext.text, 10, 10);
});