EditContext: characterboundsupdate Ereignis

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das characterboundsupdate Ereignis wird ausgelöst, wenn das Betriebssystem die Grenzen bestimmter Zeichen innerhalb eines bearbeitbaren Textbereichs des EditContext-Objekts wissen muss.

Dies tritt auf, wenn das Betriebssystem eine plattformabhängige bearbeitungsbezogene Benutzeroberfläche wie ein Input Method Editor (IME)-Fenster anzeigen muss.

Wenn das characterboundsupdate Ereignis ausgelöst wird, sollten Sie die Zeichenbegrenzungen für den Text berechnen und dann die Methode EditContext.updateCharacterBounds() aufrufen, um dem Betriebssystem die benötigten Informationen bereitzustellen.

Siehe die Dokumentation der Methode updateCharacterBounds für weitere Informationen darüber, wann und wie das characterboundsupdate Ereignis verwendet wird.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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

oncharacterboundsupdate = (event) => {};

Ereignistyp

Ein CharacterBoundsUpdateEvent. Erbt von Event.

Ereigniseigenschaften

Zusätzlich zu den unten aufgeführten Eigenschaften stehen auch Eigenschaften der übergeordneten Schnittstelle Event zur Verfügung.

CharacterBoundsUpdateEvent.rangeStart Schreibgeschützt: Der Versatz des ersten Zeichens im bearbeitbaren Textbereich, für das das Betriebssystem die Grenzen benötigt.
CharacterBoundsUpdateEvent.rangeEnd Schreibgeschützt: Der Versatz des letzten Zeichens im bearbeitbaren Textbereich, für das das Betriebssystem die Grenzen benötigt.

Beispiele

Aktualisieren der Zeichenbegrenzungen bei Bedarf

Dieses Beispiel zeigt, wie die Methode updateCharacterBounds verwendet wird, um die Zeichenbegrenzungen im EditContext eines canvas-Elements zu aktualisieren, wenn das Betriebssystem angibt, dass es die Informationen benötigt. Beachten Sie, dass der Ereignis-Listener-Callback nur aufgerufen wird, wenn ein IME-Fenster oder andere plattformspezifische Bearbeitungs-Oberflächen zur Textkomposition verwendet werden.

html

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

const FONT_SIZE = 40;
const FONT = `${FONT_SIZE}px Arial`;

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
ctx.font = FONT;

const editContext = new EditContext();
canvas.editContext = editContext;

function computeCharacterBound(offset) {
  // Measure the width from the start of the text to the character.
  const widthBeforeChar = ctx.measureText(
    editContext.text.substring(0, offset),
  ).width;

  // Measure the character width.
  const charWidth = ctx.measureText(editContext.text[offset]).width;

  const charX = canvas.offsetLeft + widthBeforeChar;
  const charY = canvas.offsetTop;

  // Return a DOMRect representing the character bounds.
  return DOMRect.fromRect({
    x: charX,
    y: charY - FONT_SIZE,
    width: charWidth,
    height: FONT_SIZE,
  });
}

editContext.addEventListener("characterboundsupdate", (e) => {
  const charBounds = [];
  for (let offset = e.rangeStart; offset < e.rangeEnd; offset++) {
    charBounds.push(computeCharacterBound(offset));
  }

  console.log("The required character bounds are", charBounds);
  editContext.updateCharacterBounds(e.rangeStart, charBounds);
});

Spezifikationen

Specification
EditContext API # dom-editcontext-oncharacterboundsupdate

Browser-Kompatibilität

BCD tables only load in the browser