我们可以让IE7将FILE TYPE = INPUT元素视为单个控件吗？

Question

通过点击TAB键浏览HTML表单时，Internet Explorer 7会将INPUT元素视为两个控件TYPE=FILE keypress }）。第一次点击TAB时，它会专注于文本字段，第二次它会在“浏览”按钮上进行调整。这对JavaScript来说是不可见的。

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

这在IE7上无效，因为第一个TAB将它带到不可见的文本字段;按SPACE会为不可见的文件名添加空格，而不是激活文件选择器。我尝试为click添加一个调用change事件的事件处理程序，但是当我执行此操作时，我依赖的{{1}}事件似乎不会被触发。

我开始认为IE7上唯一可访问的解决方案（我认为，IE8）将用两部分形式替换整个对话框 - 第一部分带有（可见）文件输入元素和上传按钮，第二部分包含所有其他表单项。这是不幸的，因为（a）IE7的用户体验不那么灵活，而且（b）我必须添加各种额外的服务器端代码，以允许表单分两部分提交。

所以我有兴趣知道是否有人有办法让IE7的文件输入元素表现得像一个控件，或者，允许JavaScript访问元素的两个控件（DOM不是为！）。

Answer 1

这有点复杂，但这里是如何：

创建一个新按钮用作“假”输入控件（您将此作为可见元素）。这个元素需要是一个按钮或链接，以便能够获得标签焦点（我建议使用按钮以便在Safari上更好地工作）。

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

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

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

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

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

Answer 2

从我的其他答案中可以明显看出，我已经设法构建了具有全键盘可访问性的小部件。

我真诚的建议是放弃这种追求。这是一个维护噩梦。您正在利用浏览器中的安全漏洞来完成这项工作，供应商关闭您所依赖的东西只是时间问题。

Answer 3

您还可以查看swfupload，因为它可能会提供您想要的内容以及更多内容。