如何以编程方式在Firefox中打开文件对话框

Question

我想以用户按键的方式以编程方式打开文件对话框。 我已经在thess答案中找到了一些解决方案，但它们似乎都不适用于Firefox。

我的小提琴就在这里 ：只需按空格键打开文件选择器（点击“结果”部分后）

正如你所看到的，我已经尝试了一些函数来模拟点击： 'eventFire' （或更简单的el.click(); ）适用于除FF以外的所有浏览器，但来自MDN的 'simulateClick'不适用于FF（？ ）

  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  el.dispatchEvent(event);

可能是因为el是一个输入？

我怎样才能在FF中实现这一目标？

Answer 1

此用例符合现代浏览器的安全限制。 他们肯定将“人为”事件与“人为”事件区分开来，并在涉及任何欺骗性问题时对待它们。 浏览器监视和评估的事件链可能非常复杂，因此翻译“真实”点击事件和“代理”它们的工作原理（用户真正点击了某些内容，因此可能意味着他打算做出一些动作），但代理键盘或其他要点击的事件有潜在危险，因此被阻止。 有这个简单的文档（你可以将其复制到URL中）：

data:text/html,
<input id="f" type="file" onclick="console.log(this,'click')" onfocus="console.log(this,'focus')">
<p>
<button onclick="f.focus()">focus ^</button>
<button onclick="f.click()">click ^</button>
<script style="display:block">
console.log(f);
f.focus();
f.click();
</script>

如果通过单击按钮触发f.click() ，它就可以工作。 如果通过控制台触发它，则触发onclick但不是默认操作（不打开文件选择器）。 适用于Chrome和Firefox。 它不是那样，你会看到文件选择器在页面加载时打开。

如果您在输入的类型从checkbox更改为file并从控制台调用simulateClick()后在MDN示例中尝试类似的实验，您将获得相同的结果（在Chrome和Firefox中）。

对我来说似乎有点神秘的事实是你的小提琴在Chrome中有效，尽管我不希望这样。