【发布时间】：2011-02-14 01:47:22
【问题描述】：
我有一个带有 opacity: 0; 和 filter: alpha(opacity: 0); 的文件输入字段，它位于一个大 div 的顶部，我将其用作选择文件的按钮，所选文件名显示在按钮下方。
一切正常，但是当您在 IE 中设置文件元素的 width 属性（在本例中为它下方的 DIV 的宽度）时，该宽度的一部分是文件输入的文本区域.当然，IE 会做自己的事情，并且与其他浏览器不同，必须双击元素的文本区域才能打开浏览对话框。 Firefox & Safari 将在元素的文本部分单击。我认为我有一个解决方法，因为 IE 允许您在元素上调用 .click() 事件。
我试过了：
<input type="file" onclick="this.click();" />
什么都没做，所以我尝试了这个：
<input type="file" onmouseup="this.click();" />
这很有效，只需单击元素的文本区域即可显示浏览对话框。但是，由于某种原因，在提交表单时，如果选择了文件，则表单不会提交，什么也不会发生。如果未选择任何文件，则将提交表单的其余部分。
所以现在我回到第一格，我的选择文件按钮的左半部分必须双击才能选择一个文件，而右半部分可以单击。我想不出任何其他方法让 IE 对元素的单击做出反应。我尝试使用onfocus 事件在元素上触发.click()，这也有效，但由于此上传对话框将是页面上唯一的内容，而<input type="file" /> 是第一个呈现的输入元素，单击页面加载时触发事件。
然后我尝试附加到正文的onload 事件，并将焦点设置为其他内容，但这为时已晚，并且焦点已经被赋予文件输入并且浏览对话框已经打开。我知道我已经接近 onfocus，有没有办法在页面加载时让元素保持焦点？或者还有其他任何人都能想到的方法吗？
谢谢！
[更新]
我再次尝试使用 onfocus，不幸的是，我错了，提交表单时再次将焦点调用到文件元素，停止提交并再次打开浏览对话框
【问题讨论】：
-
我认为所有这些问题都是由
input[type=file]的安全措施引起的。 -
嗯，这不是真的，是的，它们使文件输入元素无法通过脚本进行大量交互以采取安全措施。这就是为什么您将不透明度设置为 0 并将文件输入放置在您的样式区域上。我不认为它的安全措施会导致这个问题。它与提交表单时再次触发 onmouseup 事件有关。如果我只是在页面的其他位置创建另一个按钮并分配其单击事件以触发对文件元素的单击，那么一切正常。
标签： javascript internet-explorer file input