TextFormat

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.

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.

Konstruktor

TextFormat() Experimentell: Gibt eine neue TextFormat-Instanz zurück.

Instanz-Eigenschaften

TextFormat.rangeStart Schreibgeschützt Experimentell: Die Startposition des Textbereichs, der mit dem angegebenen Textformat formatiert werden muss.
TextFormat.rangeEnd Schreibgeschützt Experimentell: Die Endposition des Textbereichs, der mit dem angegebenen Textformat formatiert werden muss.
TextFormat.underlineStyle Schreibgeschützt Experimentell: Der Stil der Unterstreichung, die auf den Formatierten Textbereich angewendet werden muss.
TextFormat.underlineThickness Schreibgeschützt Experimentell: 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

<div id="editor"></div>

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

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

Specification
EditContext API # dom-textformat

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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