无法使用文件输入标签上的回车键打开文件浏览器

Question

我有一个文件输入，带有一个标签。我希望能够以四种不同的方式打开文件浏览器:

1. 点击文件输入按钮
2. 按文件输入键，然后回车
3. 点击文件输入标签
4. 选择文件输入标签并按下

然而，只有选项1-3是开箱即用的?这是一个错误，还是一个预期的功能?我目前正在开发FireFox v106.0.5

是否有任何解决方案，完全依赖于HTML/CSS，还是需要JS来解决这个问题?

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

Answer 1

当input接收到点击或输入时，自然会打开一个对话框。

label本身不打开对话框，但是当点击(或轻敲)时，它可以将焦点传递给其相关的输入，并因此打开对话框。

当它接收到enter时，它不会做同样的事情，因此你的问题中的情况4不起作用。

这是因为本设计的目的是增加相关input的命中大小，特别是对于触摸屏设备上的用户。

所以回答这个问题，这是一个预定的功能。