HTMLDialogElement: returnValue-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Die returnValue-Eigenschaft des HTMLDialogElement-Interfaces ist ein String, der den Rückgabewert für ein <dialog>-Element repräsentiert, wenn es geschlossen wird. Sie können den Wert direkt setzen (dialog.returnValue = "result") oder indem Sie den Wert als String-Argument an close() oder requestClose() übergeben.

Wert

Ein String, der den returnValue des Dialogs repräsentiert. Standardmäßig ist dieser ein leerer String ("").

Beispiele

Das folgende Beispiel zeigt einen Button, um einen Dialog mit einer Nutzungsbedingungen-Aufforderung über die showModal()-Methode anzuzeigen. Das Skript verarbeitet die Eingaben des Nutzers, indem es den returnValue zuweist, wenn der Annehmen- oder Ablehnen-Button geklickt wird. Der Button "Ablehnen" setzt den returnValue auf "declined", während der Button "Annehmen" ihn auf "accepted" setzt. Zudem aktualisiert das Schließen des Dialogs (z.B. mit dem Schließen-Ereignis) den Status-Text mit dem returnValue des Dialogs. Das Schließen des Dialogs mit der Esc-Taste setzt den returnValue nicht.

html
<!-- Simple pop-up dialog box -->
<dialog id="termsDialog">
  <p>Do you agree to the Terms of Service(link)?</p>
  <button id="declineButton" value="declined">Decline</button>
  <button id="acceptButton" value="accepted">Accept</button>
</dialog>
<p>
  <button id="openDialog">Review ToS</button>
</p>
<p id="statusText"></p>

<script>
  const dialog = document.getElementById("termsDialog");
  const openDialog = document.getElementById("openDialog");
  const statusText = document.getElementById("statusText");
  const declineButton = document.getElementById("declineButton");
  const acceptButton = document.getElementById("acceptButton");

  function handleUserInput(returnValue) {
    if (returnValue === "") {
      statusText.innerText = "There was no return value";
    } else {
      statusText.innerText = "Return value: " + returnValue;
    }
  }

  openDialog.addEventListener("click", () => {
    dialog.showModal();
    handleUserInput(dialog.returnValue);
  });

  declineButton.addEventListener("click", closeDialog);
  acceptButton.addEventListener("click", closeDialog);

  function closeDialog(event) {
    const button = event.target;
    const returnValue = button.value;
    dialog.close(returnValue);
    handleUserInput(dialog.returnValue);
  }

  dialog.addEventListener("close", () => {
    openCheck(dialog);
    handleUserInput(dialog.returnValue);
  });
</script>

Ergebnis

Spezifikationen

Specification
HTML
# dom-dialog-returnvalue-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • Das HTML-Element, das dieses Interface implementiert: <dialog>.