Selection.empty() — Methode · JavaScript-Referenz

Signatur

Selection.prototype.empty()

Beschreibung

Selection.empty() hebt die aktuelle Textauswahl im Dokument auf. Dabei werden alle Range-Objekte aus dem Selection-Objekt entfernt. Anschließend gilt rangeCount === 0, anchorNode und focusNode sind null und type hat den Wert "None".

Die Methode ist ein Alias von Selection.removeAllRanges() und verhält sich genau gleich. Sie stammt ursprünglich aus älteren WebKit-/IE-Implementierungen und wurde zur Kompatibilität in die Selection-API-Spezifikation aufgenommen.

Man braucht sie zum Beispiel, wenn nach einem Doppelklick keine Markierung stehen bleiben soll, wenn nach einer Aktion wie „In die Zwischenablage kopieren“ die Hilfsauswahl wieder verschwinden soll oder wenn eigene Drag-and-Drop-Logik die Textauswahl stört. Für neuen Code ist removeAllRanges() der gebräuchlichere und klarere Name.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Aktuelle Auswahl aufheben

const selection = window.getSelection();
console.log('Vorher:', selection.rangeCount, selection.type);

selection.empty();

console.log('Nachher:', selection.rangeCount, selection.type);
console.log(selection.anchorNode, selection.focusNode);

Vorher: 1 Range Nachher: 0 None null null

Hilfsauswahl nach dem Kopieren entfernen

const copyCode = async (element) => {
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(element);
  selection.removeAllRanges();
  selection.addRange(range);

  await navigator.clipboard.writeText(selection.toString());

  // Markierung wieder aufheben, damit der Nutzer nichts Markiertes sieht
  selection.empty();
};

document.querySelector('#copy-btn')
  .addEventListener('click', () => copyCode(document.querySelector('pre code')));

Markierung bei Doppelklick verhindern (mit Fallback)

const clearSelection = () => {
  const selection = window.getSelection();
  if (!selection) return;
  // empty() als Alias, removeAllRanges() als Standardname
  if (typeof selection.empty === 'function') {
    selection.empty();
  } else {
    selection.removeAllRanges();
  }
};

document.querySelector('.toolbar-button')
  .addEventListener('dblclick', () => {
    clearSelection();
    console.log('Auswahl entfernt');
  });

Auswahl entfernt

// Wichtig · Fallstricke

Alias: empty() und removeAllRanges() sind identisch. Für gut lesbaren und zukunftssicheren Code ist removeAllRanges() vorzuziehen.
Formularfelder: Eine Auswahl innerhalb von <input> oder <textarea> wird darüber nicht immer zuverlässig aufgehoben. Dort verwendet man besser setSelectionRange() oder setzt selectionStart/selectionEnd.
Fokus: Die Methode entfernt nur die Auswahl. Der Fokus des Elements bleibt erhalten, und in contenteditable-Bereichen kann das Caret verschwinden.
Ereignis: Der Aufruf löst am document ein selectionchange-Ereignis aus, sofern vorher eine Auswahl bestand. Rufen Sie die Methode deshalb nicht in einem eigenen selectionchange-Handler auf, sonst drohen Endlosschleifen.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Firefox kennt die Methode erst seit Version 55. In sehr alten Umgebungen sollte man daher auf removeAllRanges() zurückfallen.

Siehe auch

Selection.removeAllRanges() Selection.addRange() Selection.collapse() Window.getSelection() Selection HTMLOptionsCollection.remove()