javascript 我可以在表单输入 [type="file"] 中通过单击触发双击吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15343895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I trigger a double click with a single click in a form input[type="file"]?
提问by otinanai
I have a form inputfor submitting a file and I styled it because I didn't like the native style. Now, I have a single button that when clicked, it opens up the dialog to select the file. It works fine with a single click on Firefox and Chrome but it doesn't work in IE. The buttonneeds a double click to open up the dialog in IE.
我有一个input用于提交文件的表单，我对其进行了样式设置，因为我不喜欢原生样式。现在，我有一个按钮，单击该按钮会打开对话框以选择文件。在 Firefox 和 Chrome 上单击即可正常工作，但在 IE 中不起作用。该按钮需要双击才能在 IE 中打开对话框。
I have tried to trigger a double click with a single click using jQuery:
我尝试使用 jQuery 通过单击触发双击：
$("input").click(function() {
$(this).dblclick();
});
However, it doesn't seem to work. Is there any other approach to trigger a double click for IE?
但是，它似乎不起作用。有没有其他方法可以触发 IE 的双击？
Here's the demo: http://jsfiddle.net/HAaFb/
这是演示：http: //jsfiddle.net/HAaFb/
采纳答案by JoDev
The answer isn't to trigger a dblclick, but to make file dialog opening with IE... Right? So i think the soluce would be to trigger a click on the file input (wich will be hidden?)
答案不是触发 dblclick，而是使用 IE 打开文件对话框......对吗？所以我认为解决办法是触发文件输入的点击（这将被隐藏？）
$("#formId").find("input[type='file']").trigger('click');
In your fiddle, I do this :
在你的小提琴中，我这样做：
$("input").click(function() {
$('input[type="file"]').click();
});
I try this
我试试这个
$('input[type="file"]').hide().parent().append($('<span />').attr('class', 'filebutton').text('Upload'));
$(".filebutton").click(function() {
$('input[type="file"]').click();
});
With this CSS
有了这个 CSS
form {
color:#666;
}
.filebutton {
content:'upload';
font:small-caps 15px Georgia;
letter-spacing:1px;
border-radius:10px;
border:1px solid #eee;
width:100px;
padding:10px;
margin:20px;
text-align:center;
position:absolute;
left:0;
top:0;
z-index:1;
background-color:#f8f8f8;
}
.filebutton:hover {
background-color:#f3f3f3!important;
color:#c00;
cursor : pointer;
}
And it work's...
它的工作...
回答by Dom
What about something like this:
像这样的事情怎么样：
var count=0;
$("input").click(function(e) {
count++;
if(count==2){
count=0;
}else{
e.preventDefault();
}
});
DEMO: http://jsfiddle.net/HAaFb/1/
演示：http: //jsfiddle.net/HAaFb/1/
回答by Dandré
I discovered that the jQuery file upload demo page actually repositions the file input field (while "hidden") so that the Browse button sits nicely within the region of the "Add files" button. And so when you click on that button with IE 8/9/10 it opens up with a single click.
我发现 jQuery 文件上传演示页面实际上重新定位了文件输入字段（虽然“隐藏”了），以便“浏览”按钮很好地位于“添加文件”按钮的区域内。因此，当您使用 IE 8/9/10 单击该按钮时，只需单击一下即可打开。
http://blueimp.github.io/jQuery-File-Upload/
http://blueimp.github.io/jQuery-File-Upload/
In the one CSS I see:
在我看到的一个 CSS 中：
.fileinput-button input {
...
right: 0px;
...
transform: translate(300px, 0) scale(4);
}
回答by Steve
I know I'm probably late to the party, but just in case anyone else stumbles upon this post, I was able to solve a similar issue with this:
我知道我可能迟到了，但以防万一其他人偶然发现这篇文章，我能够解决类似的问题：
$("#uploadInput").bind('mousedown', function (event) {
$(this).trigger('click')
});
Worked on both IE10 & IE11.
适用于 IE10 和 IE11。
回答by marksyzm
File inputs are an native/ActiveX component in IE and therefore can't have events performed on them - same for select inputs.
文件输入是 IE 中的本机/ActiveX 组件，因此不能对它们执行事件 - 对于选择输入也是如此。
What really do you need the double click for?
你真正需要双击什么？
回答by marksyzm
It's your CSS... if you disable opacity and the clip stuff in IE, you will see that the actual browse button is over to the right.
这是您的 CSS...如果您在 IE 中禁用不透明度和剪辑内容，您将看到实际的浏览按钮位于右侧。
Make sure that filter:opacity is not used in IE9, that one worked for me. JSFiddle doesn't work in IE7/8 so I couldn't test those.
确保在 IE9 中没有使用 filter:opacity，那个对我有用。JSFiddle 在 IE7/8 中不起作用，所以我无法测试它们。
回答by Matt Starkey
I haven't check this but I imagine you would need to use something like this:
我没有检查过这个，但我想你需要使用这样的东西：
$('input').on('click', function() {
$(this).trigger('dblclick');
});
I hope thats not dumb, haha.
我希望那不是哑巴，哈哈。
回答by PSR
$("input").click(function() {
$(this).trigger('dbclick');
});
