javascript - 我们能否使 IE7 将 FILE TYPE=INPUT 元素视为单个控件？

Question

当涉及到通过按 TAB 键在 HTML 表单中导航时，Internet Explorer 7 将带有 TYPE=FILE 的 INPUT 元素视为两个 控件 ( see MSDN for details )。第一次按下 TAB 键时，它会聚焦在文本字段上，而第二次它会聚焦在浏览按钮上。这对 JavaScript 是不可见的。

问题是我想使用 Ajax Upload或类似的东西，允许用户单击看起来像按钮的东西，然后看到文件选择器出现。这是通过在鼠标下方放置一个不可见的文件输入元素来实现的。我已经设法更改脚本以允许您 TAB 到隐藏的文件输入元素并为此触发 CSS 更改，因此假按钮看起来像它具有焦点，结果是，在 IE7 以外的浏览器上，它看起来对用户来说，就好像您可以按 Tab 键切换到按钮并按预期激活它。

这不能在 IE7 上工作，因为第一个 TAB 将它带到不可见的文本字段；按空格键会在不可见的文件名中添加一个空格，而不是激活文件选择器。我尝试为调用 click 事件的 keypress 添加事件处理程序，但是当我这样做时，我所依赖的 change 事件似乎没有被解雇。

我开始认为在 IE7(我假设是 IE8)上唯一可用的解决方案是用两部分形式替换整个对话——第一部分有一个(可见的)文件输入元素和上传按钮，第二部分与所有其他表单项。这是不幸的，因为 (a) IE7 的用户体验不太好，并且 (b) 我必须添加各种额外的服务器端代码以允许分两部分提交表单。

所以我很想知道是否有人有办法让 IE7 的文件输入元素表现得像一个单独的控件，或者允许 JavaScript 访问该元素的两个控件(DOM 不是为此设计的) !)。

Answer 1

这有点复杂，但方法如下:

创建一个新按钮用作您的“假”输入控件(您将其作为可见元素)。此元素需要是按钮或链接才能获得选项卡焦点(我建议使用按钮，这样它在 Safari 上效果更好)。

通过将 .tabIndex 设置为 -1，从跳格顺序中删除文件输入。它现在应该隐藏在视线和 Tab 键顺序之外。

将事件分配给文件输入，以便在事件中将焦点移回假按钮，从中复制值，等等。

将点击事件分配给在文件输入元素上调用 .click 的假按钮。这仅适用于 IE。它也很可能会在未来的版本中中断。

对于 mozilla 风格的浏览器，您可以将焦点从假按钮移动到 keydown 上的文件输入，keypress 事件将发生在文件控件上，您可以然后将焦点移回更改 上的假按钮。这也应该为您提供删除/退格功能(清除字段)。

清除IE中的字段只能通过重建一个新的文件输入控件来完成。