代码之家 › 专栏 › 技术社区 › pdc

我们能让IE7把文件类型=输入元素当作一个单独的控件吗?

internet-explorer-7 forms ajax javascript

pdc · 技术社区 · 16 年前

当要通过按Tab键浏览HTML表单时,Internet Explorer 7将处理 INPUT 元素与 TYPE=FILE 作为二控件( see MSDN for details )。第一次点击tab时,它会聚焦在文本字段上,第二次聚焦在浏览按钮上。这对javascript是不可见的。

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

这在IE7上无法工作,因为第一个选项卡将其带到不可见文本字段;按空格键将为不可见文件名添加一个空间,而不是激活文件选取器。我已尝试为添加事件处理程序 keypress 那叫 click 但是当我这样做的时候 change 我所依赖的事件似乎不会被解雇。

我开始认为IE7上唯一可访问的解决方案(并且,我假设,IE8)将用一个由两部分组成的表单替换整个对话——第一部分是一个(可见的)文件输入元素和上载按钮,第二部分是所有其他表单项。这是很不幸的,因为(a)IE7获得了一个不那么流畅的用户体验,(b)我必须添加各种额外的服务器端代码,以允许表单分两部分提交。

因此,我想知道是否有人能够让IE7的文件输入元素表现得像一个单独的控件,或者允许javascript访问元素的两个控件(dom不是为之设计的!).

3 回复 | 直到 16 年前

Borgar 16 年前

从我的另一个答案可以明显看出,我已经成功地构建了具有完整键盘访问功能的这个小部件。

我真诚的建议是放弃这种追求。这是维修恶梦 .您正在利用浏览器中的安全漏洞来实现这一点,供应商关闭您所依赖的东西只是时间问题。

Borgar 16 年前

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

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

通过设置文件的 .tabIndex 到1。它现在应该被隐藏起来,不让人看到,也不让人看到它。

将事件分配给文件输入,以便在“活动”中,将焦点移回“假”按钮,并从中复制值,依此类推。

将Click事件分配给调用 .click 在文件输入元素上。这只对IE有效。它也很可能在将来的版本中中断。

对于Mozilla风格的浏览器,您可以将焦点从“假”按钮移动到上的文件输入 键盘按下 , the 按键事件将在文件控件上发生,然后您可以将焦点移回“假”按钮改变 . 这还应该提供del/backspace功能(清除字段)。

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

Mikko Tapionlinna 16 年前

你也可以退房 swfupload 因为它可能提供你想要的以及更多。