Das<button>-HTML Element ist ein interaktives Element, das von einem Benutzer mit Maus, Tastatur, Finger, Sprachbefehl oder anderer unterstützender Technologie aktiviert werden kann. Einmal aktiviert führt es eine Aktion aus, wie das Absenden einesFormulars oder das Öffnen eines Dialogs.

Standardmäßig werden HTML-Buttons in einem Stil präsentiert, der der Plattform ähnelt, auf der derBenutzeragent läuft, aber Sie können das Erscheinungsbild der Buttons mitCSS ändern.

Probieren Sie es aus

<button type="button">Add to favorites</button>

.styled {  border: 0;  line-height: 2.5;  padding: 0 20px;  font-size: 1rem;  text-align: center;  color: white;  text-shadow: 1px 1px 1px black;  border-radius: 10px;  background-color: tomato;  background-image: linear-gradient(    to top left,    rgb(0 0 0 / 0.2),    rgb(0 0 0 / 0.2) 30%,    transparent  );  box-shadow:    inset 2px 2px 3px rgb(255 255 255 / 0.6),    inset -2px -2px 3px rgb(0 0 0 / 0.6);}.styled:hover {  background-color: red;}.styled:active {  box-shadow:    inset -2px -2px 3px rgb(255 255 255 / 0.6),    inset 2px 2px 3px rgb(0 0 0 / 0.6);}

Attribute

Dieses Element enthält dieglobalen Attribute.

autofocus

Dieses boolesche Attribut gibt an, dass der Button bei Laden der Seite den Eingabe-Fokus haben soll.Nur ein Element in einem Dokument kann dieses Attribut haben.

command

Gibt die Aktion an, die auf ein Element angewendet werden soll, das von einem Steuerungs-<button> über dascommandfor-Attribut kontrolliert wird. Mögliche Werte sind:

"show-modal"

Der Button zeigt ein<dialog> als modales Fenster an. Wenn der Dialog bereits modal ist, wird keine Aktion ausgeführt. Dies ist das deklarative Äquivalent zum Aufrufen derHTMLDialogElement.showModal() Methode auf dem<dialog>-Element.

"close"

Der Button schließt ein<dialog>-Element. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt. Dies ist das deklarative Äquivalent zum Aufrufen derHTMLDialogElement.close() Methode auf dem<dialog>-Element. Bei Verwendung mit demvalue-Attribut wird der Wert des Buttons alsreturnValue-Eigenschaft des Dialogs übergeben.

"request-close"

Der Button löst eincancel Ereignis auf einem<dialog>-Element aus, um den Browser aufzufordern, es zu schließen, gefolgt von einemclose Ereignis. Dies unterscheidet sich vomclose-Befehl darin, dass AutorenEvent.preventDefault() auf dascancel-Ereignis anwenden können, um zu verhindern, dass das<dialog> geschlossen wird. Wenn das Dialogfenster bereits geschlossen ist, wird keine Aktion ausgeführt. Dies ist das deklarative Äquivalent zum Aufrufen derHTMLDialogElement.requestClose() Methode auf dem<dialog>-Element. Bei Verwendung mit demvalue-Attribut des Buttons wird der Wert alsreturnValue-Eigenschaft des Dialogs übergeben.

"show-popover"

Der Button zeigt ein verstecktes Popover an. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt. Weitere Details finden Sie in derPopover API. Dies ist gleichbedeutend mit dem Setzen eines Wertes vonshow für daspopovertargetaction Attribut und bietet auch ein deklaratives Äquivalent zum Aufrufen derHTMLElement.showPopover() Methode auf dem Popover-Element.

"hide-popover"

Der Button verbirgt ein angezeigtes Popover. Wenn Sie versuchen, ein bereits verstecktes Popover zu verbergen, wird keine Aktion ausgeführt. Weitere Details finden Sie in derPopover API. Dies ist gleichbedeutend mit dem Setzen eines Wertes vonhide für daspopovertargetaction Attribut und bietet auch ein deklaratives Äquivalent zum Aufrufen derHTMLElement.hidePopover() Methode auf dem Popover-Element.

"toggle-popover"

Der Button wechselt ein Popover zwischen sichtbar und versteckt. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Weitere Details finden Sie in derPopover API. Dies ist gleichbedeutend mit dem Setzen eines Wertes vontoggle für daspopovertargetaction Attribut und bietet auch ein deklaratives Äquivalent zum Aufrufen derHTMLElement.togglePopover() Methode auf dem Popover-Element.

Benutzerdefinierte Werte

Dieses Attribut kann benutzerdefinierte Werte darstellen, die mit zwei Bindestrichen (--) vorangestellt sind. Buttons mit einem benutzerdefinierten Wert lösen dasCommandEvent auf dem gesteuerten Element aus.

commandfor

Macht ein<button>-Element zu einem Befehls-Button, der ein bestimmtes interaktives Element steuert, indem er den imcommand-Attribut des Buttons angegebenen Befehl sendet. Dascommandfor-Attribut nimmt die ID des zu steuernden Elements als Wert. Dies ist eine allgemeinere Version vonpopovertarget.

disabled

Dieses boolesche Attribut verhindert, dass der Benutzer mit dem Button interagiert: Er kann nicht gedrückt oder fokussiert werden.

form

Das<form>-Element, das dem Button zugeordnet werden soll (seinemFormulareigentümer). Der Wert dieses Attributs muss dieid eines<form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, ist der<button> seinem Vorfahren-<form>-Element zugeordnet, falls vorhanden.)

Dieses Attribut ermöglicht es Ihnen,<button> Elemente mit<form> Elementen überall im Dokument zu verknüpfen, nicht nur innerhalb eines<form>. Es kann auch ein Vorfahren-<form>-Element außer Kraft setzen.

formaction

Die URL, die die vom Button übermittelten Informationen verarbeitet. Überschreibt dasaction-Attribut des Formulareigentümers des Buttons. Hat keine Auswirkung, wenn kein Formulareigentümer vorhanden ist.

formenctype

Wenn der Button ein Absende-Button ist (er befindet sich innerhalb/ist mit einem<form> verbunden und hattype="button" nicht angegeben), gibt an, wie die übermittelten Formulardaten kodiert werden sollen. Mögliche Werte:

• application/x-www-form-urlencoded: Der Standard, wenn das Attribut nicht verwendet wird.
• multipart/form-data: Wird verwendet, um<input>-Elemente mit ihremtype-Attribut auffile gesetzt zu übermitteln.
• text/plain: Als Debug-Hilfe angegeben; sollte nicht für echte Formularübermittlungen verwendet werden.

Wenn dieses Attribut angegeben ist, überschreibt es dasenctype-Attribut des Formulareigentümers des Buttons.

formmethod

Wenn der Button ein Absende-Button ist (er befindet sich innerhalb/ist mit einem<form> verbunden und hattype="button" nicht angegeben), gibt dieses Attribut die verwendeteHTTP-Methode an, um das Formular zu übermitteln. Mögliche Werte:

• post: Die Daten aus dem Formular werden im Body der HTTP-Anfrage eingeschlossen, wenn sie an den Server gesendet wird. Verwenden Sie dies, wenn das Formular Informationen enthält, die nicht öffentlich sein sollten, wie Anmeldedaten.
• get: Die Formulardaten werden an dieaction-URL des Formulars angehängt, mit einem? als Separator, und die resultierende URL wird an den Server gesendet. Verwenden Sie diese Methode, wenn das Formularkeine Nebeneffekte hat, wie Suchformulare.
• dialog: Diese Methode wird verwendet, um anzugeben, dass der Button denDialog schließt, mit dem er verbunden ist, und die Formulardaten überhaupt nicht übermittelt.

Wenn angegeben, überschreibt dieses Attribut dasmethod-Attribut des Formulareigentümers des Buttons.

formnovalidate

Wenn der Button ein Absende-Button ist, gibt dieses boolesche Attribut an, dass das Formular nichtvalidiert werden soll, wenn es übermittelt wird. Wenn dieses Attribut angegeben ist, überschreibt es dasnovalidate Attribut des Formulareigentümers des Buttons.

Dieses Attribut ist auch auf<input type="image"> und<input type="submit">-Elementen verfügbar.

formtarget

Wenn der Button ein Absende-Button ist, ist dieses Attribut ein vom Autor definierter Name oder ein standardisiertes, unterstrichprefixiertes Schlüsselwort, das angibt, wo die Antwort auf die Formularübermittlung angezeigt werden soll. Dies ist dername oder das Schlüsselwort für einenBrowsing-Kontext (ein Tab, Fenster oder<iframe>). Wenn dieses Attribut angegeben ist, überschreibt es dastarget-Attribut des Formulareigentümers des Buttons. Die folgenden Schlüsselwörter haben besondere Bedeutungen:

• _self: Laden Sie die Antwort in denselben Browsing-Kontext wie den aktuellen. Dies ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: Laden Sie die Antwort in einen neuen, unbenannten Browsing-Kontext – normalerweise ein neuer Tab oder ein Fenster, abhängig von den Einstellungen des Benutzers.
• _parent: Laden Sie die Antwort in den übergeordneten Browsing-Kontext des aktuellen. Wenn es keinen übergeordneten gibt, verhält sich diese Option wie_self.
• _top: Laden Sie die Antwort in den obersten Browsing-Kontext (der Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen übergeordneten hat). Wenn es keinen übergeordneten gibt, verhält sich diese Option wie_self.

interestforExperimentellNicht standardisiert

Definiert das<button>-Element alsInteresse-Invoker. Sein Wert ist dieid eines Ziel-Elements, das in irgendeiner Weise betroffen sein wird (normalerweise angezeigt oder verborgen), wenn Interesse an dem Invoker-Element gezeigt oder verloren wird (zum Beispiel durch Hovern/Unhovern oder Fokussieren/Unfokussieren). Weitere Details und Beispiele finden Sie unterVerwenden von Interesse-Invokern.

name

Der Name des Buttons, der als Paar mit demvalue des Buttons als Teil der Formulardaten übermittelt wird, wenn dieser Button zum Absenden des Formulars verwendet wird.

popovertarget

Macht ein<button>-Element zu einem Popover-Steuerungselement; nimmt die ID des Popover-Elements, das zu steuern ist, als Wert. Wenn eine Beziehung zwischen einem Popover und seinem Invoker-Button mit dempopovertarget-Attribut hergestellt wird, hat dies zwei zusätzliche nützliche Effekte:

• Der Browser erstellt eine implizitearia-details undaria-expanded Beziehung zwischen Popover und Invoker und positioniert das Popover logisch in der Reihenfolge der Tastaturfokussierung, wenn es angezeigt wird. Dies macht das Popover für Tastatur- und Hilfstechnologie-Nutzer (AT) zugänglicher (siehe auchPopover-Zugänglichkeitsfunktionen).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr bequem macht, Popover relativ zu ihren Steuerelementen unter Verwendung derCSS-Ankerpositionierung zu positionieren. Weitere Details finden Sie unterPopover-Ankerpositionierung.

popovertargetaction

Gibt die Aktion an, die auf ein Popover-Element angewendet werden soll, das von einem Steuerungs-<button> gesteuert wird. Mögliche Werte sind:

"hide"

Der Button wird ein angezeigtes Popover verbergen. Wenn Sie versuchen, ein bereits verstecktes Popover zu verbergen, wird keine Aktion ausgeführt.

"show"

Der Button wird ein verstecktes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt.

"toggle"

Der Button wird ein Popover zwischen sichtbar und versteckt wechseln. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Wennpopovertargetaction weggelassen wird, ist"toggle" die Standardaktion, die vom Steuerungs-Button ausgeführt wird.

type

Das Standardverhalten des Buttons. Mögliche Werte sind:

• submit: Der Button übermittelt die Formulardaten an den Server. Dies ist der Standard, wenn das Attribut für Buttons, die mit einem<form> verbunden sind, nicht angegeben ist, oder wenn das Attribut einen leeren oder ungültigen Wert aufweist.
• reset: Der Button setzt alle Steuerungen auf ihre Ausgangswerte zurück, wie<input type="reset">. (Dieses Verhalten neigt dazu, Benutzer zu verärgern.)
• button: Der Button hat kein Standardverhalten und tut nichts, wenn er standardmäßig gedrückt wird. Er kann clientseitige Skripts haben, die auf Ereignisse des Elements hören, die ausgelöst werden, wenn die Ereignisse auftreten.

value

Definiert den Wert, der demname des Buttons zugeordnet ist, wenn er mit den Formulardaten übermittelt wird. Dieser Wert wird beim Absenden des Formulars mit diesem Button an den Server in den Parametern übergeben. Bei Verwendung mit den Befehlenclose oderrequest-close setzt dasvalue-Attribut denreturnValue des gesteuerten<dialog>-Elements.

Anmerkungen

Ein Absende-Button mit gesetztem Attributformaction, aber ohne zugeordnetes Formular, tut nichts. Sie müssen einen Formulareigentümer festlegen, entweder indem Sie es in ein<form> einfügen oder dasform-Attribut auf die ID des Formulars setzen.

<button>-Elemente sind viel einfacher zu stylen als<input>-Elemente. Sie können HTML-Inhalt hinzufügen (denken Sie an<i>,<br> oder sogar<img>), und::after und::before Pseudo-Elemente für komplexes Rendern verwenden.

Wenn Ihre Buttons nicht zur Übermittlung von Formulardaten an einen Server gedacht sind, stellen Sie sicher, dass ihrtype-Attribut aufbutton gesetzt ist. Andernfalls versuchen sie, Formulardaten zu übermitteln und die (nicht vorhandene) Antwort zu laden, was möglicherweise den aktuellen Zustand des Dokuments zerstört.

Während<button type="button"> kein Standardverhalten hat, können Ereignishandler geskriptet werden, um Verhalten auszulösen. Ein aktivierter Button kann programmierbare Aktionen mitJavaScript ausführen, wie das Entfernen eines Elements aus einer Liste.

Standardmäßig stylen Benutzeragenten Buttons alsdisplay: flow-root, was einen neuenBlock-Formatierungskontext festlegt und die Kinder des Buttons sowohl horizontal als auch vertikal zentriert, solange sie nicht überlaufen. Wenn der Button als flex- oder gitterbasierter Container definiert ist, verhalten sich die Kinder als flex- oder gitterbasierte Elemente. Ein Button, der aufdisplay: inline gesetzt ist, wird so gestylt, als ob der Wert aufdisplay: inline-block gesetzt wäre.

Barrierefreiheit

Icon-Buttons

Buttons, die nur ein Icon anzeigen, haben keinenzugänglichen Namen. Zugängliche Namen bieten Informationen für unterstützende Technologien, wie Bildschirmlesegeräte, auf die zugegriffen werden kann, wenn sie das Dokument parsen undeinen Barrierefreiheitstree erzeugen. Unterstützende Technologien verwenden dann den Barrierefreiheitstree, um zu navigieren und Seiteninhalte zu manipulieren.

Um einem Icon-Button einen zugänglichen Namen zu geben, fügen Sie Text in das<button>-Element ein, das die Funktionalität des Buttons prägnant beschreibt.

Beispiele

<button name="favorite">  <svg fill="black" viewBox="0 0 42 42">    <path      d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,      3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,      2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>  </svg>  Add to favorites</button>

Ergebnis

Wenn Sie den Text des Buttons visuell ausblenden möchten, ist es ein zugänglicher Weg, eineKombination von CSS-Eigenschaften zu verwenden, um ihn visuell vom Bildschirm zu entfernen, aber von unterstützenden Technologien parsierbar zu halten.

Es ist jedoch erwähnenswert, dass das Sichtbarlassen des Button-Textes Menschen helfen kann, die möglicherweise nicht mit der Bedeutung des Icons vertraut sind oder die Funktion des Buttons verstehen. Dies ist besonders wichtig für Menschen, die technologisch nicht versiert sind oder die möglicherweise unterschiedliche kulturelle Interpretationen des Icons haben, das der Button verwendet.

• Was ist ein zugänglicher Name? | The Paciello Group
• MDN Understanding WCAG, Leitlinie 4.1-Erklärungen
• Verstehen des Erfolgskriteriums 4.1.2 | W3C Understanding WCAG 2.0

Größe und Nähe

Größe

Interaktive Elemente wie Buttons sollten eine ausreichend große Fläche haben, um leicht aktiviert zu werden. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Kontrollproblemen und Menschen, die unpräzise Eingabeformen wie einen Stift oder Finger verwenden. Eine minimale Interaktivgröße von 44×44CSS-Pixel wird empfohlen.

• Verstehen des Erfolgskriteriums 2.5.5: Zielgröße | W3C Understanding WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Touch-Ziele - Das A11Y Project

Nähe

Große Mengen interaktiver Inhalte – einschließlich Buttons –, die in enger visueller Nähe zueinander platziert sind, sollten Abstand dazwischen haben. Diese Abstände sind vorteilhaft für Menschen, die motorische Kontrollprobleme haben, die möglicherweise versehentlich den falschen interaktiven Inhalt aktivieren.

Der Abstand kann mit CSS-Eigenschaften wiemargin erstellt werden.

• Handzittern und das Problem mit riesigen Buttons - Axess Lab

ARIA-Zustandsinformationen

Um den Zustand eines Buttons zu beschreiben, ist das korrekte ARIA-Attributaria-pressed und nichtaria-checked oderaria-selected. Um mehr zu erfahren, lesen Sie die Informationen über dieARIA-Button-Rolle.

Button-Stile

Es ist am besten, den Standard-Fokusring für Elemente, die den Fokus haben, nicht zu überschreiben. Wenn die Button-Stile überschrieben werden, ist es wichtig,sicherzustellen, dass der Fokuszustand genug Kontrast hat, damit Menschen mit Sehschwächen ihn wahrnehmen können und Menschen mit kognitiven Unterschieden ihn verstehen.

Die:focus-visible Pseudoklasse kann verwendet werden, um Stile auf ein Element anzuwenden, das:focus hat, wenn die Heuristiken des Benutzeragenten bestimmen, dass der Fokus hervorgehoben werden soll, wie z.B. wenn ein<button> Tastaturfokus erhält. Weitere Informationen finden Sie unter:focus vs :focus-visible.

Das Farbkontrastverhältnis wird bestimmt, indem die Helligkeit der Farbwerte des Button-Textes und Hintergrundes mit dem Hintergrund, auf dem der Button platziert ist, verglichen wird. Um den aktuellenWeb Content Accessibility Guidelines (WCAG) zu entsprechen, ist ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für großen Text erforderlich. (Großer Text ist definiert als 18,66px undbold oder größer, oder 24px oder größer.)

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Leitlinie 1.4-Erklärungen
• Verstehen des Erfolgskriteriums 1.4.3 | W3C Understanding WCAG 2.0

Klicken und Fokus

Ob das Klicken auf einen<button> oder<input>-Button-Typen dazu führt, dass er (standardmäßig) den Fokus erhält, variiert je nach Browser und Betriebssystem. Die meisten Browser geben einem angeklickten Button den Fokus, aberSafari tut es nicht, durch Design.

Beispiele

Erstellen eines einfachen Buttons

Dieses Beispiel erstellt einen anklickbaren Button.Dastype="button"-Attribut stellt sicher, dass der Button kein Standardverhalten hat.Sie können diesen Button interaktiv mit JavaScript oder Attributen wiecommand undcommandfor machen.

<button type="button" name="button">I'm a button</button>

Verwendung desrequest-close Wertes für dascommand-Attribut

Der Dialog in diesem Beispiel hat zwei Radiobuttons, die steuern, ob der Dialog geschlossen werden kann oder nicht.Wählen SieJa oderNein aus und klicken Sie dann aufRequest to Close, um zu versuchen, den Dialog zu schließen.WennJa ausgewählt ist, wird der Dialog geschlossen; wennNein ausgewählt ist, bleibt der Dialog geöffnet und zeigt stattdessen eine Nachricht an.

<button type="button" commandfor="mydialog" command="show-modal">  Open Dialog</button><dialog>  <div>    <form>      <fieldset>        <legend>Allow this dialog to close when requested?</legend>        <div>          <input type="radio" name="close" value="no" checked />          <label for="no">No</label>        </div>        <div>          <input type="radio" name="close" value="yes" />          <label for="yes">Yes</label>        </div>      </fieldset>    </form>    <button commandfor="mydialog" command="request-close">      Request to Close    </button>    <p hidden>You must choose "Yes" to close this dialog.</p>  </div></dialog>

.warning {  color: tomato;}

const dialog = document.querySelector("dialog");const radio = document.querySelector("form").elements["close"];const warning = document.querySelector(".warning");dialog.addEventListener("cancel", (e) => {  if (!e.cancelable) return;  if (radio.value === "no") {    warning.hidden = false;    e.preventDefault();  } else {    warning.hidden = true;  }});

DerOpen Dialog-Button öffnet das<dialog>-Element mitcommand="show-modal".

DerRequest to Close-Button hatcommand="request-close", das mit dem<dialog>-Element durch dascommandfor="mydialog"-Attribut verknüpft ist. Wenn darauf geklickt wird, fragt es das<dialog>, ob es geschlossen werden kann (anders als dascommand="close"-Attribut, das das<dialog> sofort schließen würde).Dies prüft, ob das<dialog>cancelable ist, unter Verwendung einescancel-Ereignisses.

Wenn das Ereigniscancelable ist, wird der Wert der Radiobuttons geprüft:

• Wenn aufyes gesetzt, wird der Dialog geschlossen.
• Wenn aufno gesetzt, wird dashidden-Attribut auf der Warnung deaktiviert und die MethodepreventDefault() wird aufgerufen, was das Standardverhalten des Schließens des<dialog> verhindert.

Verwendung desvalue-Attributs mit Dialogclose-Befehl

Dieses Beispiel zeigt, wie man dasvalue-Attribut des Buttons mit demclose-Befehl verwendet, um den Wert derreturnValue Eigenschaft eines Dialogs zu füllen.

Wenn entweder derCancel- oderDelete-Button angeklickt wird, schließt der Dialog und setzt seinenreturnValue auf dasvalue-Attribut des Buttons.Derclose-Ereignis-Listener prüftdialog.returnValue, um festzustellen, welche Aktion der Benutzer gewählt hat, und protokolliert das Ergebnis auf dem Bildschirm.

HTML

Das HTML definiert zuerst einenDelete Record-Button, der dascommandfor-Attribut verwendet, um das zu öffnende Dialog anzugeben.

Innerhalb des Dialogs verwendenCancel- undDelete-Buttons dascommandfor-Attribut, um anzugeben, dass sie auf das aktuelle Dialogfenster angewendet werden.Sie setzen auch dascommand-Attribut auf "close" und dasvalue-Attribut auf "cancel" und "delete" – der Wert des ausgewählten Buttons wird automatisch in denreturnValue des Dialogs kopiert, wenn der Button geklickt wird.

<button commandfor="confirm-dialog" command="show-modal">Delete Record</button><dialog>  <header>    <h1>Delete Record?</h1>  </header>  <p>Are you sure? This action cannot be undone</p>  <footer>    <button commandfor="confirm-dialog" command="close" value="cancel">      Cancel    </button>    <button commandfor="confirm-dialog" command="close" value="delete">      Delete    </button>  </footer></dialog>

<pre></pre>

#log {  height: 20px;}

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = text;}

JavaScript

Der Code verwendet einenclose-Ereignis-Listener, um denreturnValue des Dialogs zu protokollieren.

const dialog = document.getElementById("confirm-dialog");dialog.addEventListener("close", () => {  switch (dialog.returnValue) {    case "cancel":      log("Cancel was clicked");      break;    case "delete":      log("Delete was clicked");      break;    default:      log("Closed with value:", dialog.returnValue);  }});

Ergebnisse

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität