Selection.isCollapsed — Eigenschaft · JavaScript-Referenz

Signatur

Selection.isCollapsed

Beschreibung

Selection.isCollapsed gibt einen booleschen Wert zurück. Er ist true, wenn Anker (anchorNode/anchorOffset) und Fokus (focusNode/focusOffset) auf dieselbe Position zeigen. Die Auswahl ist dann „zusammengefallen“ und entspricht im Grunde nur einer Einfügemarke, zum Beispiel der blinkenden Schreibmarke in einem contenteditable-Element. Wenn gar keine Auswahl existiert (rangeCount === 0), ist der Wert ebenfalls true.

Praktisch ist die Eigenschaft, um vor einer Aktion schnell zu prüfen, ob der Nutzer überhaupt etwas markiert hat. Typische Fälle sind ein schwebendes Formatierungsmenü in einem Editor, eine Schaltfläche „Markierung zitieren“ oder die Funktion „Auswahl kopieren“. So musst du nicht erst toString() aufrufen und das Ergebnis auf einen leeren String prüfen.

Eine nicht zusammengefallene Auswahl muss nicht unbedingt sichtbaren Text enthalten. Sie kann auch nur Elementgrenzen oder Leerraum umfassen. isCollapsed === false heißt also nur „Anfang ≠ Ende“ und nicht „es gibt nicht-leeren Text“.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Auswahl zusammengefallen ist (Einfügemarke) oder gar keine Auswahl existiert. false, wenn ein Bereich markiert ist.

Beispiele

Einfache Prüfung, ob etwas markiert ist

const selection = document.getSelection();

if (selection.isCollapsed) {
  console.log('Nichts markiert');
} else {
  console.log(`Markiert: "${selection.toString()}"`);
}

Nichts markiert

Formatierungsleiste nur bei aktiver Markierung anzeigen

const toolbar = document.querySelector('#format-toolbar');
const editor = document.querySelector('[contenteditable]');

document.addEventListener('selectionchange', () => {
  const sel = document.getSelection();
  const insideEditor = sel.rangeCount > 0 && editor.contains(sel.anchorNode);

  if (!insideEditor || sel.isCollapsed) {
    toolbar.hidden = true;
    return;
  }

  // Leiste über der Markierung positionieren
  const rect = sel.getRangeAt(0).getBoundingClientRect();
  toolbar.style.top = `${rect.top + window.scrollY - 40}px`;
  toolbar.style.left = `${rect.left + window.scrollX}px`;
  toolbar.hidden = false;
});

Auswahl programmatisch zusammenfallen lassen

const p = document.createElement('p');
p.textContent = 'Hallo Welt';
document.body.append(p);

const sel = window.getSelection();
sel.selectAllChildren(p);
console.log(sel.isCollapsed); // Text markiert

sel.collapseToEnd();
console.log(sel.isCollapsed); // nur noch Einfügemarke

false true

// Wichtig · Fallstricke

Nicht gleichbedeutend mit leerem Text: Eine nicht zusammengefallene Auswahl kann trotzdem toString() === '' liefern, etwa wenn sie nur ein Bild oder Elementgrenzen umfasst. Wenn du wirklich Text brauchst, prüfe zusätzlich toString().trim().
Formularfelder: In <input> und <textarea> spiegelt die Document-Selection die Markierung im Feld nicht zuverlässig wider. Dort solltest du selectionStart !== selectionEnd verwenden.
Shadow DOM: Bei Auswahlen innerhalb von Shadow Roots unterscheiden sich die Browser. Für präzise Ergebnisse gibt es getComposedRanges() (neu, noch nicht überall verfügbar).
Mehrere Bereiche: Firefox erlaubt mehrere Ranges (z. B. mit Strg-Auswahl). isCollapsed bezieht sich dort auf Anker und Fokus, nicht auf jeden einzelnen Range.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. Sie ist schreibgeschützt, Zuweisungen werden ignoriert.

Siehe auch

Selection Selection.prototype.collapse() Selection.type Document.prototype.getSelection() Selection.anchorOffset