Question

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

My fiddle is here：只需按空格键即可打开文件选择器（点击“结果”部分后）

正如您所看到的，我尝试了一些模拟点击的功能：'eventFire'（或更简单地el.click();）适用于除FF以外的所有浏览器，但'simulateClick' wich comes from MDN不能不能用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 example尝试类似的实验，您将获得相同的结果（在Chrome和Firefox中）。

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

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

1 个答案: