本文旨在解决HTML Dialog元素中，由于Chromium浏览器的一个已知Bug（#1449848）导致的文件选择问题。该Bug表现为，当用户在Dialog中的 元素中取消文件选择或选择与之前相同的文件时，Dialog会意外关闭。虽然尝试使用 event.preventDefault() 阻止默认行为无效，但我们可以通过JavaScript模拟文件选择过程来规避此问题。
解决方案：自定义文件选择按钮
核心思路是创建一个自定义的按钮，通过JavaScript触发隐藏的 元素的文件选择行为。当文件被选择后，更新显示的文件名，并替换原来的 元素，从而避免Dialog关闭。
HTML 结构
首先，在Dialog中添加一个自定义的文件选择区域：
其中：
立即学习“前端免费学习笔记（深入）”；
pick-file-wrapper：包含自定义文件选择按钮和文件名显示区域。pick-file-button：自定义的文件选择按钮。file-name：用于显示已选择的文件名。pick-file-input：隐藏的 元素，用于触发文件选择。
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} */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); } });}
代码解释：
handlePickFileByCustomButton 函数：当自定义按钮被点击时触发，调用 pickFile 函数打开文件选择器。pickFile 函数：创建一个隐藏的 元素（如果不存在），并监听其 onchange 事件。当文件被选择时，resolve Promise，返回选中的文件列表。migrateElementAttributes 函数：将原始 元素的属性复制到新的元素上，保持样式和行为一致。每次文件选择后，克隆一个新的input元素，并用它替换旧的input元素。
注意事项
内存泄漏: 上述代码可能存在内存泄漏问题，需要进一步测试和优化。样式对齐: 自定义按钮的样式可能与原生 元素不完全一致，需要根据实际情况进行调整。浏览器兼容性: 虽然此方案主要针对Chromium浏览器，但建议在其他浏览器中进行测试，确保兼容性。
总结
通过自定义文件选择按钮和JavaScript代码，我们可以规避Chromium浏览器中HTML Dialog元素的文件选择Bug，允许用户在不关闭Dialog的情况下重新选择或取消文件。虽然此方案并非完美，但可以作为临时解决方案，直到Chromium官方修复此Bug。在实际应用中，请务必注意内存泄漏问题，并根据需要调整样式和进行兼容性测试。
以上就是解决HTML Dialog中文件选择取消或重复选择导致Dialog关闭的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527702.html
微信扫一扫 
支付宝扫一扫 
