Signatur
Beschreibung
window.confirm() öffnet einen vom Browser gestalteten, modalen Dialog mit einer optionalen Nachricht sowie den Schaltflächen OK und Abbrechen. Die Ausführung des Skripts wird synchron angehalten, bis der Benutzer eine Wahl trifft. Klickt er auf OK, liefert die Methode true, bei Abbrechen, Escape oder Schließen des Dialogs false.
Typische Einsatzfälle sind schnelle Sicherheitsabfragen vor destruktiven Aktionen, zum Beispiel „Eintrag wirklich löschen?“, oder vor dem Verlassen eines ungespeicherten Formulars. Für Prototypen, Admin-Oberflächen und interne Werkzeuge ist confirm() damit eine sehr bequeme Lösung.
In produktiven Oberflächen sollte man die Methode sparsam verwenden: Aussehen und Beschriftungen lassen sich nicht anpassen, der Dialog blockiert den gesamten Haupt-Thread (Timer, Rendering, Ereignisse), und Browser können ihn unter bestimmten Bedingungen unterdrücken, etwa bei Tabs im Hintergrund oder nach wiederholten Dialogen. Eine flexible Alternative ist das Element <dialog> mit showModal().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $message | string | "" | Text, der im Dialog angezeigt wird. Andere Werte werden in einen String umgewandelt. Der Text wird als reiner Text dargestellt, HTML wird nicht interpretiert. Zeilenumbrüche mit \n sind möglich. |
Rückgabewert
Beispiele
Einfache Sicherheitsabfrage
const ok = confirm('Möchten Sie fortfahren?');
console.log(ok ? 'Bestätigt' : 'Abgebrochen');Löschen erst nach Bestätigung ausführen
const deleteButton = document.querySelector('#delete');
deleteButton.addEventListener('click', async () => {
const name = deleteButton.dataset.name ?? 'diesen Eintrag';
if (!confirm(`Soll "${name}" wirklich gelöscht werden?\nDas lässt sich nicht rückgängig machen.`)) {
return; // Benutzer hat abgebrochen
}
const res = await fetch(`/api/items/${deleteButton.dataset.id}`, { method: 'DELETE' });
console.log(res.ok ? 'Gelöscht' : `Fehler: ${res.status}`);
});Formularversand abbrechen
const form = document.querySelector('#order-form');
form.addEventListener('submit', (event) => {
const total = form.elements.total.value;
if (!confirm(`Bestellung über ${total} € verbindlich absenden?`)) {
event.preventDefault(); // Absenden verhindern
}
});Nicht blockierende Alternative mit <dialog>
// HTML: <dialog id="ask"><form method="dialog"><p>Wirklich löschen?</p>
// <button value="no">Abbrechen</button><button value="yes">Löschen</button></form></dialog>
const askUser = () => new Promise((resolve) => {
const dlg = document.querySelector('#ask');
dlg.addEventListener('close', () => resolve(dlg.returnValue === 'yes'), { once: true });
dlg.showModal();
});
const confirmed = await askUser();
console.log(confirmed);// Wichtig · Fallstricke
- Blockiert den Haupt-Thread: Solange der Dialog offen ist, laufen weder Timer noch Animationen oder andere Ereignis-Handler. Das kann Messwerte und Echtzeit-Funktionen verfälschen.
- Unterdrückung möglich: Browser können den Dialog in Hintergrund-Tabs nicht anzeigen oder ihn sofort mit
falsebeenden. Nach wiederholten Dialogen können Benutzer über „Keine weiteren Dialoge“ alle weiteren Dialoge unterdrücken. In sandbox-iframes ohneallow-modalswird der Aufruf ignoriert und liefertfalse. Chrome blockiert Dialoge außerdem in iframes mit anderem Ursprung. - Keine Anpassung: Die Beschriftung der Schaltflächen, das Layout und die Sprache legt der Browser fest. Für eigene Designs und bessere Barrierefreiheit eignet sich
<dialog>. - Nicht in Workern oder in Node.js:
confirm()gibt es nur im Fensterkontext. In Web Workern ist die Methode nicht definiert. Deno bietet eine eigene Umsetzung für die Konsole. - Keine Sicherheitsgrenze: Eine Bestätigung im Browser ersetzt keine Prüfung auf dem Server, denn Skripte können sie umgehen.
- Den Text lieber kurz halten, weil manche Browser lange Nachrichten abschneiden.