是否可以使用 <form> 为 HTML 原生 <dialog>（无插件）制作关闭/关闭按钮？答案

【问题标题】：Is it possible to make a Close/Dismiss button for HTML native <dialog> (no plugin) with <form>?是否可以使用 <form> 为 HTML 原生 <dialog>（无插件）制作关闭/关闭按钮？
【发布时间】：2021-11-29 10:40:32
【问题描述】：

根据这个example，我创建了一个简单的dialog，其中包含一个form：

const diag = document.querySelector("#diag")

diag.addEventListener("close", () => {
  if (!diag.returnValue) { return; }
  
  document.querySelector(".result").textContent = document.querySelector("#txt-name").value;
});

document.querySelector("#btn-show").addEventListener("click", () => {
  diag.showModal();
});

<dialog id="diag">
  <form method="dialog">
    <input id="txt-name" required />
    
    <button value="submit">Submit</button>
    <button value="">Cancel</button>
  </form>
</dialog>

<button id="btn-show">Show Dialog</button>

<p>Result: <span class="result"></span></p>

但是，由于input 具有required 属性，用户无法在不填充的情况下单击它。我知道我可以将click 事件添加到取消按钮并关闭对话框，但我有很多这样的对话框，如果有一个通用的本机解决方案会更好。

我需要一个关闭对话框的解决方案；并将其 returnValue 设置为空 ("") if close 事件由此类按钮引发。

当前解决方法：

document.querySelector("#btn-cancel")
   .addEventListener("click", () => {
      diag.close(""); // Have to set this since onclose event is raised.
   })

【问题讨论】：

对我来说你真正想要达到的目标有点不清楚。你想要的最终结果是什么？
@MihaiT 抱歉，我更新了问题以包含我想要的内容和当前的解决方法。
对话框关闭，因为表单被提交。但是，使输入字段成为必需，可以防止在字段未填写时发生表单提交 - 因此对话框也不会关闭。您必须在此处使用 JS 才能获得所需的功能。
@CBroe 是的，我明白这一点。我知道为什么会这样。我只是想知道是否有我不知道的解决方法。谢谢。
小心！ Dialog is not fully supported on Firefox.

标签： javascript html dialog

【解决方案1】：

我认为您应该在您的 cancel button 事件侦听器中使用 dialog.close()。这样做将丢弃所有对话框，从而摆脱所有未填充的inputs。表单将不会在dialog.close() 上提交。

【讨论】：