HTML对话框文件选择后自动关闭怎么解决

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《HTML Dialog文件选择后自动关闭解决方法》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

本文旨在解决HTML Dialog元素中，由于Chromium浏览器的一个已知Bug（#1449848）导致的文件选择问题。该Bug表现为，当用户在Dialog中的 <input type="file"> 元素中取消文件选择或选择与之前相同的文件时，Dialog会意外关闭。虽然尝试使用 event.preventDefault() 阻止默认行为无效，但我们可以通过JavaScript模拟文件选择过程来规避此问题。

解决方案：自定义文件选择按钮

核心思路是创建一个自定义的按钮，通过JavaScript触发隐藏的 <input type="file"> 元素的文件选择行为。当文件被选择后，更新显示的文件名，并替换原来的 <input type="file"> 元素，从而避免Dialog关闭。

HTML 结构

首先，在Dialog中添加一个自定义的文件选择区域：

<dialog id="dialog">
  <form id="form">
    <label>Buggy input</label>
    &lt;input type=&quot;file&quot; /&gt;
    <label>Patched input</label>
    <div id="pick-file-wrapper">
      <button id="pick-file-button" type="button">Choose File</button>
      <span id="file-name">No file chosen</span>
      &lt;input id=&quot;pick-file-input&quot; type=&quot;file&quot; /&gt;
    </div>
  </form>
</dialog>
<button id="button">Open dialog</button>

其中：

• pick-file-wrapper：包含自定义文件选择按钮和文件名显示区域。
• pick-file-button：自定义的文件选择按钮。
• file-name：用于显示已选择的文件名。
• pick-file-input：隐藏的 <input type="file"> 元素，用于触发文件选择。

CSS 样式

为了美观和功能性，可以添加以下CSS样式：

#pick-file-wrapper {
  width: 252.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
#pick-file-input {
  display: none;
}
#pick-file-button {
  max-width: 253px;
  font-size: smaller;
  flex-shrink: 0;
  flex-grow: 0;
}
#file-name {
  font-size: 13px;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: auto;
}
#form {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 4px 8px;
}

JavaScript 代码

以下JavaScript代码实现了文件选择的模拟和更新：

/** @type {HTMLDialogElement} dialog */
const dialog = document.getElementById("dialog");
/** @type {HTMLButtonElement} dialog */
const button = document.getElementById("button");
button.addEventListener("click", () => dialog.showModal());

/** @type {HTMLButtonElement} dialog */
const pickFileButton = document.getElementById("pick-file-button");
/** @type {HTMLSpanElement} dialog */
const fileName = document.getElementById("file-name");
pickFileButton.addEventListener("click", handlePickFileByCustomButton);

const filePickerId = "file-picker";
async function handlePickFileByCustomButton() {
  const file = await pickFile();
  /** @type {HTMLInputElement} dialog */
  let inputTag = document.getElementById(filePickerId).cloneNode();
  /** @type {HTMLInputElement} dialog */
  const pickFileInput = document.getElementById("pick-file-input");
  inputTag.style.display = pickFileInput.style.display;
  migrateElementAttributes(pickFileInput, inputTag);
  pickFileInput.parentElement.replaceChild(inputTag, pickFileInput);
  fileName.innerText = Array.from(file)
    .map((fileItem) => fileItem.name)
    .join(", ");
}

/** @return {Promise<FileList>} */
function pickFile() {
  return new Promise((resolve, reject) => {
    /** @type {HTMLInputElement} dialog */
    let inputTag = document.getElementById(filePickerId);
    if (!inputTag) {
      inputTag = document.createElement("input");
      inputTag.type = "file";
      inputTag.id = filePickerId;
      inputTag.style.display = "none";
      document.body.appendChild(inputTag);
    }
    inputTag.onchange = () => {
      if (!inputTag?.files || !inputTag?.value) {
        return;
      }
      resolve(inputTag.files);
    };
    inputTag.click();
  });
}

/**
 * Copy attributes from the existing input element to the new input element
 *
 * @argument {HTMLInputElement} templateElement
 * @argument {HTMLInputElement} targetElement
 */
function migrateElementAttributes(templateElement, targetElement) {
  Array.from(templateElement.attributes).forEach((attr) => {
    if (attr.name !== "files" && attr.name !== "value") {
      targetElement.setAttribute(attr.name, attr.value);
    }
  });
}

代码解释：

1. handlePickFileByCustomButton 函数：当自定义按钮被点击时触发，调用 pickFile 函数打开文件选择器。
2. pickFile 函数：创建一个隐藏的 <input type="file"> 元素（如果不存在），并监听其 onchange 事件。当文件被选择时，resolve Promise，返回选中的文件列表。
3. migrateElementAttributes 函数：将原始 <input type="file"> 元素的属性复制到新的元素上，保持样式和行为一致。
4. 每次文件选择后，克隆一个新的input元素，并用它替换旧的input元素。

注意事项

• 内存泄漏: 上述代码可能存在内存泄漏问题，需要进一步测试和优化。
• 样式对齐: 自定义按钮的样式可能与原生 <input type="file"> 元素不完全一致，需要根据实际情况进行调整。
• 浏览器兼容性: 虽然此方案主要针对Chromium浏览器，但建议在其他浏览器中进行测试，确保兼容性。

总结

通过自定义文件选择按钮和JavaScript代码，我们可以规避Chromium浏览器中HTML Dialog元素的文件选择Bug，允许用户在不关闭Dialog的情况下重新选择或取消文件。虽然此方案并非完美，但可以作为临时解决方案，直到Chromium官方修复此Bug。在实际应用中，请务必注意内存泄漏问题，并根据需要调整样式和进行兼容性测试。

今天关于《HTML对话框文件选择后自动关闭怎么解决》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！