我可以通过在输入[type =“file”]的表单中单击一下来触发双击吗？

问题描述：

我有一个表格input用于提交文件，我对它进行了设计，因为我不喜欢本地风格。现在，我有一个单击按钮，单击它时会打开对话框以选择文件。它只需点击一下Firefox和Chrome即可正常工作，但在IE中无法使用。按钮需要双击打开IE中的对话框。我可以通过在输入[type =“file”]的表单中单击一下来触发双击吗？

我试图触发双击与使用jQuery一个单一的点击：

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

然而，它似乎并没有工作。有没有其他方法触发双击IE浏览器？

这里的演示：http://jsfiddle.net/HAaFb/

您试图支持哪种版本的IE？ – tymeJV 2013-03-11 16:50:09

主要问题是：为什么需要在IE中双击？这可能是固定的。文件输入通常由两部分组成：看起来像文本输入和按钮。在IE和IE中，前者是由双击触发的，后者是通过单击。 – 2013-03-11 16:50:23

@tymeJV至少IE9 – otinanai 2013-03-11 16:51:38

答

答案不是触发一个dblclick，而是使IE打开文件对话框......对吗？所以我觉得soluce将触发对文件输入点击

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

在你的小提琴，我这样做（至极将被隐藏）：

$("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; 
}

的d它的工作是...

当我第一次插入第一个脚本时，只要文档加载，对话框就会打开。我认为这可能是它，但我需要的是打开一个单一的点击对话框。你的第二段代码看起来很有前途，但由于某些原因，它在IE9中不起作用。 – otinanai 2013-03-11 17:01:54

问题是，用你的解决方案，在IE中的第一次点击只是把焦点放在按钮上......而我现在知道如何修复它！ – JoDev 2013-03-11 17:08:41

这就是为什么我想在第一次点击后触发第二次点击。 – otinanai 2013-03-11 17:10:06

答

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

它仍然不会在IE中触发双击 – otinanai 2013-03-11 16:45:23

答

什么是这样的：

var count=0; 
$("input").click(function(e) { 
    count++; 
    if(count==2){ 
     count=0; 
    }else{ 
     e.preventDefault(); 
    } 
});

DEMO： http://jsfiddle.net/HAaFb/1/

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

它仍然不能在IE中工作 – otinanai 2013-03-11 16:46:41

我刚刚在IE8中测试过，适合我... http://jsbin.com/ukotit/17/edit – Dom 2013-03-11 16:49:46

测试过IE9，它不会单击打开对话框。 – otinanai 2013-03-11 16:58:22

答

我没有检查这一点，但我想象你需要使用这样的事情：

$('input').on('click', function() { 
    $(this).trigger('dblclick'); 
});

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

我试过了触发双击的各种变化，但仍然无法在IE中使用。 – otinanai 2013-03-11 16:48:25

答

文件输入是IE中的本机/ ActiveX组件，因此不能在它们上执行事件 - 对于选择输入也是如此。

你真的需要双击吗？

这正是我所做的，如果你检查演示。不过，我只想为IE模拟双击。 – otinanai 2013-03-11 16:49:30

我想打开默认对话框来选择要上传的文件。这可以通过点击隐藏在这种情况下的浏览按钮或双击输入框来完成。 – otinanai 2013-03-11 17:07:48

您将需要重新定位浏览按钮，如下所述。由于ActiveX组件的限制，不可能在输入字段上双击。当浏览按钮= 1点击时，只需更改其定位并在“不透明”视图中进行测试即可。 – marksyzm 2013-03-11 17:30:55

答

这是你的CSS ...如果你在IE中禁用不透明和剪辑的东西，你会看到实际的浏览按钮已经结束了。

确保在IE9中不使用过滤器：不透明度，那个为我工作。 JSFiddle在IE7/8中不起作用，所以我无法测试它们。

答

我发现jQuery文件上传演示页实际重新定位文件输入字段（“隐藏”），以便浏览按钮很好地位于“添加文件”按钮的区域内。所以当你用IE 8/9/10点击那个按钮时，只需点击一下就可以打开。

http://blueimp.github.io/jQuery-File-Upload/

在一个CSS我看到：

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

答

我知道我大概迟到了，但只是在这篇文章以防别人跌倒，我能解决类似的问题与此：

$("#uploadInput").bind('mousedown', function (event) { 
    $(this).trigger('click') 
});

曾参与开发IE10 & IE11。

我可以通过在输入[type =“file”]的表单中单击一下来触发双击吗？

相关推荐