TextUpdateEvent

Hàm khởi tạo

TextUpdateEvent() Experimental

Tạo một đối tượng TextUpdateEvent mới.

Thuộc tính phiên bản

TextUpdateEvent.updateRangeStart Read only Experimental

Trả về chỉ số của ký tự đầu tiên trong phạm vi văn bản đã được cập nhật.

TextUpdateEvent.updateRangeEnd Read only Experimental

Trả về chỉ số của ký tự cuối cùng trong phạm vi văn bản đã được cập nhật.

TextUpdateEvent.text Read only Experimental

Trả về văn bản đã được chèn vào phạm vi đã cập nhật.

TextUpdateEvent.selectionStart Read only Experimental

Trả về chỉ số của ký tự đầu tiên trong phạm vi vùng chọn mới, sau khi cập nhật.

TextUpdateEvent.selectionEnd Read only Experimental

Trả về chỉ số của ký tự cuối cùng trong phạm vi vùng chọn mới, sau khi cập nhật.

Ví dụ

Hiển thị văn bản đã cập nhật trong canvas có thể chỉnh sửa

Trong ví dụ sau, EditContext API được dùng để hiển thị văn bản có thể chỉnh sửa trong phần tử <canvas>, và sự kiện textupdate được dùng để hiển thị văn bản khi người dùng nhập liệu.

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

Thông số kỹ thuật

Tương thích trình duyệt