HTMLDialogElement: returnValue プロパティ

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.

returnValueHTMLDialogElement インターフェイスのプロパティで、このダイアログ (<dialog>) の返値を取得または設定します。ふつう、閉じる際にどのボタンが押されたかを示します。

ダイアログの returnValue を表す文字列です。

次の例では、フォームの入った <dialog>showModal() メソッドで開くためのボタンを表示しています。スクリプトは returnvalue に初期値を割り当てています。そこから、確認ボタンで検証つきフォームを送信し、「×」ボタンで検証なしでフォームを送信します。method="dialog" でフォームを送信すると、ダイアログが閉じられ、返値には送信ボタンの name (もしあれば)が設定されます。リセットボタンにはダイアログを閉じるイベントハンドラーがありますが、これは returnValue には何の影響もありません。Esc キーでダイアログを閉じることもできません。

html
<!-- フォームの入った単純なポップアップのダイアログボックス -->
<dialog id="favDialog">
  <form method="dialog">
    <input
      type="submit"
      aria-label="close"
      value="X"
      name="Xbutton"
      formnovalidate />
    <p>
      <label
        >Favorite animal:
        <select name="favAnimal" required>
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <menu>
      <button type="reset" value="resetBtn">Reset</button>
      <button type="submit" value="confirmBtn">Confirm</button>
    </menu>
  </form>
</dialog>

<p>
  <button id="openDialog">Open Dialog</button>
</p>
<p id="text"></p>

<script>
  (() => {
    const openDialog = document.getElementById("openDialog");
    const dialog = document.getElementById("favDialog");
    const text = document.getElementById("text");
    const reset = document.querySelector("[type='reset']");
    dialog.returnValue = "initialValue";

    function openCheck(dialog) {
      if (dialog.open) {
        text.innerText = "Dialog open";
      } else {
        text.innerText = "Dialog closed";
      }
    }

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

    // "Open Dialog" ボタンは <dialog> をモーダルに開く
    openDialog.addEventListener("click", () => {
      dialog.showModal();
      openCheck(dialog);
      handleUserInput(dialog.returnValue);
    });

    reset.addEventListener("click", () => {
      dialog.close();
    });

    // ダイアログが閉じられたとき、どのように閉じられたかにかかわらず
    dialog.addEventListener("close", () => {
      openCheck(dialog);
      handleUserInput(dialog.returnValue);
    });
  })();
</script>
<style>
  [aria-label="close"] {
    appearance: none;
    border-radius: 50%;
    border: 1px solid;
    float: right;
  }
</style>

結果

仕様書

Specification
HTML
# dom-dialog-returnvalue-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
returnValue

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報

  • このインターフェイスを実装している HTML 要素: <dialog>