Selection.type — Eigenschaft · JavaScript-Referenz

Signatur

Selection.type

Beschreibung

Die Eigenschaft type eines Selection-Objekts sagt aus, in welchem Zustand die Auswahl des Dokuments gerade ist. Möglich sind genau drei Werte:

"None": Es gibt keine Auswahl, zum Beispiel wenn der Nutzer noch nichts angeklickt hat (rangeCount === 0).
"Caret": Die Auswahl ist zusammengefallen. Die Einfügemarke steht also an einer Stelle, aber es ist kein Text markiert (isCollapsed === true).
"Range": Es ist tatsächlich ein Bereich markiert, etwa ein Stück Text.

Die Eigenschaft eignet sich gut, um schnell zu entscheiden, ob sich eine Aktion lohnt. Beispiele sind eine Toolbar zum Formatieren, eine „Zitieren“-Schaltfläche oder eigene Kopierfunktionen, die nur bei echter Markierung sinnvoll sind. Sie ist kürzer zu lesen als die Kombination aus rangeCount und isCollapsed.

Das Selection-Objekt bekommt man über window.getSelection() oder document.getSelection(). Weil die Auswahl ein „lebendiges“ Objekt ist, gibt type immer den Zustand zum Zeitpunkt des Zugriffs zurück.

Rückgabewert

Typ

"None" | "Caret" | "Range"

Beschreibung

Ein String, der den aktuellen Auswahltyp beschreibt. Die Eigenschaft ist schreibgeschützt; Zuweisungen werden ignoriert.

Beispiele

Auswahltyp abfragen

const selection = window.getSelection();
console.log(selection.type);

// Nach dem Markieren von Text:
const p = document.createElement('p');
p.textContent = 'Hallo Welt';
document.body.append(p);

const range = document.createRange();
range.selectNodeContents(p);
selection.removeAllRanges();
selection.addRange(range);
console.log(selection.type);

// Auswahl zusammenfallen lassen
selection.collapseToStart();
console.log(selection.type);

selection.removeAllRanges();
console.log(selection.type);

None Range Caret None

Formatierungs-Toolbar nur bei echter Markierung anzeigen

const toolbar = document.querySelector('#toolbar');

document.addEventListener('selectionchange', () => {
  const selection = document.getSelection();
  // Nur einblenden, wenn wirklich Text markiert ist
  toolbar.hidden = selection?.type !== 'Range';
});

Markierten Text zitieren

const quoteButton = document.querySelector('#quote');
const textarea = document.querySelector('#antwort');

quoteButton.addEventListener('click', () => {
  const selection = window.getSelection();
  if (selection.type !== 'Range') {
    console.log('Bitte zuerst Text markieren.');
    return;
  }
  const zitat = selection.toString().trim();
  textarea.value += `> ${zitat}\n\n`;
});

Bitte zuerst Text markieren. (falls nichts markiert ist)

// Wichtig · Fallstricke

Groß-/Kleinschreibung: Die Werte beginnen mit einem Großbuchstaben ("Range", nicht "range"). Vergleiche müssen genau stimmen.
Nicht standardisiert? Die Eigenschaft steht in der Selection-API-Spezifikation. Firefox unterstützt sie aber erst seit Version 110. Für ältere Browser prüft man als Ausweichlösung rangeCount === 0 (entspricht „None“) und isCollapsed (entspricht „Caret“).
Formularfelder: Markierungen in <input> und <textarea> verhalten sich je nach Browser unterschiedlich in der Dokument-Auswahl. Dafür sind selectionStart und selectionEnd des Elements verlässlicher.
Leerraum: "Range" ist auch möglich, wenn nur Leerzeichen oder Elemente ohne sichtbaren Text markiert sind. Deshalb kann toString() zusätzlich geprüft werden.
Wenn das Dokument nicht angezeigt wird (z. B. in einem iframe mit display: none), kann getSelection() in Firefox null liefern. Deshalb optionale Verkettung (?.) verwenden.

Siehe auch

Selection Window.getSelection() Selection.isCollapsed Selection.rangeCount Range PressureRecord.state