css - IE 中的文件输入行为

Question

我注意到 chrome 和 IE 在处理文件输入点击时的行为有所不同。

jsFiddle 示例在这里。

在 Chrome 中，单击输入的任意位置（文本或按钮位）会触发文件对话。

在 IE（在 7 上测试）中，您必须单击实际按钮，而不是文本位。

问题是我在常规文本框顶部使用透明文件输入。单击文本框应打开对话框。在 Chrome 中这工作正常，因为输入的总大小与我的文本框大小相同。

在 IE 中它不能正常工作，因为用户需要点击透明文件输入的实际按钮部分。

关于如何解决这个问题的任何想法？

谢谢

Answer 1

看看这些人是如何做到的：http ://www.filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

策略是相同的，将自定义设计的文件输入覆盖在标准文件输入上，并让用户与标准文件进行交互。

他们编写了一个小技巧来支持 IE 和 Opera 的点击，使用 jQuery 显式绑定点击事件。

请参阅：http ://dwpe.googlecode.com/svn/trunk/fileinput/js/jQuery.fileinput.js （第 52 行）

Answer 2

你需要想办法在file输入框上触发点击事件。。

也许在底层文本框上添加一个点击处理程序，将点击事件发送到文件框。

例如：http: //jsfiddle.net/MqbrV/

它在 Firefox（但默认操作应该足够了）和 Opera（没有工作）中不起作用。