TextFormat

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

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

Die TextFormat-Schnittstelle stellt ein spezifisches Format dar, das auf einen Textbereich in einer bearbeitbaren Textregion angewendet werden soll, die mit einer EditContext-Instanz verknüpft ist. Die Textformatierung wird von dem Input Method Editor (IME) Fenster angefordert, mit dem der Benutzer Text erstellt.

Beim Einsatz einer der standardmäßigen bearbeitbaren Regionen im Web, wie einem <textarea>-Element, wird die IME-Zusammensetzung vom Browser und Betriebssystem übernommen. Beispielsweise können bei Verwendung eines japanischen IME in einem Textarea unter Windows die folgenden Textformate angewendet werden:

Wenn Text mit der Tastatur eingegeben wird, haben die getippten Zeichen eine dünne wellenförmige Unterstreichung:
Wenn der Benutzer einen Vorschlag aus der Liste der Kandidaten im IME-Fenster auswählt, wird der Text ersetzt und mit einer dicken durchgehenden Linie unterstrichen:

Wenn Sie Ihre eigene benutzerdefinierte bearbeitbare Region mit der EditContext API erstellen, müssen Sie die IME-Zusammensetzung selbst verwalten. Sie sollten das textformatupdate-Ereignis abhören, das Ihnen die Liste der Textformate zur Verfügung stellt, die das IME-Fenster auf den Text anwenden möchte, der gerade erstellt wird. Sie sollten dann das Format des in Ihrer bearbeitbaren Region angezeigten Textes entsprechend aktualisieren.

In diesem Artikel

Konstruktor

TextFormat()

Gibt eine neue TextFormat-Instanz zurück.

Instanz-Eigenschaften

TextFormat.rangeStart Schreibgeschützt

Die Startposition des Textbereichs, der mit dem angegebenen Textformat formatiert werden muss.

TextFormat.rangeEnd Schreibgeschützt

Die Endposition des Textbereichs, der mit dem angegebenen Textformat formatiert werden muss.

TextFormat.underlineStyle Schreibgeschützt

Der Stil der Unterstreichung, die auf den Formatierten Textbereich angewendet werden muss.

TextFormat.underlineThickness Schreibgeschützt

Die Dicke der Unterstreichung, die auf den Formatierten Textbereich angewendet werden muss.

Beispiele

Verwendung des textformatupdate-Ereignisses

Im folgenden Beispiel wird das textformatupdate-Ereignis verwendet, um die verschiedenen Formate zu protokollieren, die das IME-Zusammensetzungsfenster auf Textranges im bearbeitbaren Element anwenden möchte. Beachten Sie, dass der Ereignis-Listener Callback in diesem Beispiel nur aufgerufen wird, wenn ein IME-Fenster zur Texterstellung verwendet wird.

html

#editor {
  height: 200px;
  background: #eeeeee;
}

js
const editorEl = document.getElementById("editor");
const editContext = new EditContext(editorEl);
editorEl.editContext = editContext;

editContext.addEventListener("textformatupdate", (e) => {
  // Get the TextFormat instances.
  const formats = e.getTextFormats();

  // Iterate over the TextFormat instances.
  for (const format of formats) {
    console.log(
      `Applying a ${format.underlineThickness} ${format.underlineStyle} underline between ${format.rangeStart} and ${format.rangeEnd}.`,
    );
  }
});

Spezifikationen

Spezifikation

EditContext API
# dom-textformat

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

EditContext API
TextFormat
Konstruktor
1. TextFormat()
Instanzeigenschaften
Verwandte Seiten für EditContext API
Anleitungen
1. Verwenden der EditContext-API