Jquery 触发点击在 mac、Ipad 和 Safari 浏览器上不起作用IPhone

Question

我试图在单击另一个按钮时触发输入类型=“文件”上的单击事件。

演示： http://jsfiddle.net/Y85g6/

它在所有浏览器中都能正常工作，除了 mac、Ipad 和 Safari 浏览器之外。 IPhone。

有什么技巧可以完成这个任务吗？

Answer 1

您可以使用以下在所有浏览器中都能成功运行的代码，而不是 trigger("click")：

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); 
document.getElementById(elem_id).dispatchEvent(evt);

Answer 2

找到了替代方案。

只需通过绝对定位将输入 type="file" 定位在自定义按钮上，然后使用 jQuery fadeTo('fast',0) 隐藏它。

现在，如果我们单击自定义按钮，则会出现文件浏览器窗口。

它适用于所有桌面浏览器，但不适用于 iPhone 和iPad 因为它们不允许上传任何文件。

Answer 3

使元素可见，因为触发事件不适用于 mac safari 中的隐藏元素。

Answer 4

以下方法对我有用：

$(".upload_on_click").each(function(index) {
    var form = $(this).next("form");
    //form.hide(); /* THIS TECHNIQUE DIDN'T WORK IN SAFARI */
    form.css("position", "absolute");
    form.css("visibility", "hidden");
    $(this).css("cursor", "pointer");
    $(this).click(function() {
        $('input[type="file"]', form).trigger("click");
    });
    $('input[type="file"]', form).change(function() {
        $('input[type="submit"]', form).trigger("click");
    });
});

Answer 5

出于安全原因，浏览器在 JavaScript 与文件输入交互时可能非常挑剔。 Safari 会阻止您触发它们上的任何点击事件。 Chrome 和 Firefox 的某些版本也有此限制。这是之前此处讨论。

Answer 6

最好使用CSS而不是JS来隐藏元素，因为它会直接将你的元素渲染为隐藏。

Answer 7

不确定是否有人再读这个问题，但我最近在 Safari 上遇到了类似的问题，所以我想我会分享。

首先，正如 ceejayoz 提到的，请参阅此处的讨论：在 JavaScript 中，我可以以编程方式为文件输入元素触发“单击”事件吗？

那么，如果您不想使用按钮定位，则解决方案是显示文件输入按钮（删除“display:none;”) 并使用“opacity:0;”隐藏它。您可能还想对其进行绝对定位，这样它就不会与其他元素交互。不管怎样，这样你仍然可以在所有浏览器中使用JS来激活文件输入。

Answer 8

Safari 不支持 .click()。萨图的建议应该有效。但您不需要 Javascript 来自定义输入文件按钮。

<label><input type="file" id="file" name="file" style="position:absolute; left:-9999px;" />Upload</label>

参考：http://noypiscripter.blogspot.com/2014 /04/simplest-cross-browser-custom-upload.html

Answer 9

得到了这个 opacity : 0.01 最简单的答案

我在输入文件元素上

Answer 10

只需删除“display：none”并使用“visibility：hidden”即可跨浏览器工作。

Answer 11

尝试在页脚中加载脚本。我遇到过几次类似的问题，这成功了。