FireFox中file input标签按Enter无法唤起文件浏览器的问题咨询

这是预期特性，不是Bug #

Firefox 106.0.5的表现符合HTML规范：

• 原生<label>元素的默认交互逻辑中，仅**点击（含鼠标点击、空格键触发的模拟点击）**会触发关联<input>的对应行为
• 当给<label>设置tabindex="0"让它可通过Tab聚焦后，按下Enter键并没有默认绑定触发关联控件的逻辑，所以第4种场景无效是标准行为，并非浏览器Bug

是否有纯HTML/CSS解决方案？ #

没有。HTML和CSS无法修改原生元素的键盘事件默认行为，必须通过JavaScript补充这个交互逻辑。

JavaScript修复方案 #

给label添加键盘事件监听，当检测到Enter键按下时，主动触发关联file input的点击事件：

<label for="file_input" tabindex="0">
  Label
</label>
<input type="file" id="file_input">

<script>
const label = document.querySelector('label[for="file_input"]');
label.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.keyCode === 13) {
    e.preventDefault();
    document.getElementById('file_input').click();
  }
});
</script>

这段代码会在label被聚焦且按下Enter时，模拟点击file input，从而唤起文件浏览器，覆盖你需要的4种交互场景。

内容的提问来源于stack exchange，提问作者Th3o4oR