2011-02-14 60 views
1

我有一个文件输入字段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玩一次,不幸的是,我错了,重点是打电话时再提交表单文件元素,停止提交并重新打开浏览对话框

+0

我认为所有这些问题都是由`input [type = file]`的安全措施造成的。 – alex 2011-02-14 01:52:25

+0

嗯,那不是真的,是的,他们使文件输入元素无法通过脚本进行多次交互以实现安全措施。这就是为什么你设置不透明度为0,并将文件输入放置在样式化区域。我不认为它的安全措施会导致这个问题。它与提交表单时再次触发onmouseup事件有关。如果我只是在页面的其他按钮上添加另一个按钮并指定其单击事件以触发点击文件元素,则一切正常。 – 2011-02-14 01:59:39

回答