当通过按 TAB 键浏览 HTML 表单时，Internet Explorer 7 将带有 TYPE=FILE 的 INPUT 元素视为两个 控件( see MSDN for details )。第一次按 TAB 时，它会聚焦在文本字段上，第二次它会聚焦在“浏览”按钮上。这对于 JavaScript 来说是不可见的。
问题是我想使用 Ajax Upload或类似的东西，允许用户单击看起来像按钮的东西，然后看到文件选择器出现。这是通过在鼠标下方放置一个不可见的文件输入元素来实现的。我已经设法更改脚本，以允许您按 TAB 键切换到隐藏的文件输入元素，并为此触发 CSS 更改，以便假按钮看起来具有焦点，结果是，在 IE7 以外的浏览器上，它看起来向用户展示，就像您可以按 Tab 键切换到该按钮并按预期激活它一样。
这在 IE7 上不起作用，因为第一个 TAB 将其带到不可见的文本字段；按空格键会在不可见的文件名中添加一个空格，而不是激活文件选择器。我尝试为 keypress 添加一个调用 click 事件的事件处理程序，但是当我这样做时，我所依赖的 change 事件似乎不是被解雇。
我开始认为 IE7(以及我认为 IE8)上唯一可访问的解决方案是将整个对话替换为两部分形式 - 第一部分带有(可见)文件输入元素和上传按钮，第二部分包含所有其他表单项。这是不幸的，因为 (a) IE7 的用户体验不太流畅，(b) 我必须添加各种额外的服务器端代码以允许表单分两部分提交。
所以我很想知道是否有人有办法让 IE7 的文件输入元素表现得像单个控件，或者允许 JavaScript 访问该元素的两个控件(DOM 不是为此设计的) !)。
最佳答案
这做起来有点复杂，但具体方法如下:
创建一个新按钮用作“假”输入控件(您将其作为可见元素)。该元素需要是一个按钮或链接才能获得选项卡焦点(我建议使用按钮，这样它在 Safari 上效果更好)。
通过将文件输入的 .tabIndex 设置为 -1，从 Tab 键顺序中删除文件输入。现在它应该隐藏在视线和 Tab 键顺序之外。
将事件分配给文件输入，以便在事件时焦点移回假按钮，从中复制值，等等。
将点击事件分配给在文件输入元素上调用 .click 的假按钮。这仅适用于 IE。它也很可能在未来的版本中出现故障。
对于 mozilla 风格的浏览器，您可以将焦点从假按钮移动到 keydown 上的文件输入，keypress 事件将发生在文件控件上，您可以然后将焦点移回到更改上的假按钮。这还应该为您提供删除/退格功能(清除字段)。
清除 IE 中的字段只能通过重建新的文件输入控件来完成。
关于javascript - 我们可以让 IE7 将 FILE TYPE=INPUT 元素视为单个控件吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/714795/