我可以在表单输入[type= " file "]中单击一次就触发双击吗?

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.

我有一个提交文件的表单输入，我设计它是因为我不喜欢原生样式。现在，我有一个按钮，当点击时，它会打开对话框来选择文件。在火狐和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/

8 个解决方案

#1

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...

和它的工作……

#2

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/

http://jsbin.com/ukotit/17/edit

#3

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/

In the one CSS I see:

在一个CSS中我看到:

.fileinput-button input {
...
right: 0px;
...
transform: translate(300px, 0) scale(4);
}

#4

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?

你真正需要双击什么?

#5

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。

#6

$("input").click(function() { 
    $(this).trigger('dbclick');
});

#7

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.

我希望这不是愚蠢的，哈哈。

#8

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中没有使用，那个对我有用。JSFiddle在IE7/8中不能运行，所以我不能测试它们。

#1