我可以在表单输入[type =" file"]中单击一次来触发双击吗？ [英] Can I trigger a double click with a single click in a form input[type="file"]?

问题描述

我有一个表单输入用于提交文件，我设计了它，因为我不喜欢原生风格。现在，我有一个按钮，当单击它时，它会打开对话框以选择文件。只需单击Firefox和Chrome即可正常工作，但在IE中无法正常工作。 按钮需要双击才能打开IE中的对话框。

I have a form input for 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 button needs a double click to open up the dialog in IE.

我尝试使用jQuery单击一次就触发双击：

I have tried to trigger a double click with a single click using jQuery:

$("input").click(function() { 
    $(this).dblclick(); 
});

然而，它似乎不起作用。有没有其他方法可以触发IE的双击？

However, it doesn't seem to work. Is there any other approach to trigger a double click for IE?

这是演示： http://jsfiddle.net/HAaFb/

推荐答案

答案是不要触发一个dblclick，但要用IE打开文件对话框......对吗？所以我认为解决方案是触发文件输入的点击（将被隐藏？）

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?)

$("#formId").find("input[type='file']").trigger('click');

在你的小提琴中，我这样做：

In your fiddle, I do this :

$("input").click(function() { 
    $('input[type="file"]').click(); 
});

我试试这个

$('input[type="file"]').hide().parent().append($('<span />').attr('class', 'filebutton').text('Upload'));
$(".filebutton").click(function() { 
    $('input[type="file"]').click(); 
});

使用此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...

这篇关于我可以在表单输入[type =" file"]中单击一次来触发双击吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！