Jquery 触发点击在 mac、Ipad 和 Iphone 中的 safari 浏览器上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8928386/
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
Jquery trigger click not working on safari browsers in mac, Ipad & Iphone
提问by Mandeep Pasbola
I am trying to trigger a click event on input type="file" on the click of an another button.
我试图在单击另一个按钮时触发 input type="file" 上的单击事件。
Demo: http://jsfiddle.net/Y85g6/
演示：http: //jsfiddle.net/Y85g6/
It's working fine in all browsers except on safari browsers in mac, Ipad & Iphone.
除了 mac、Ipad 和 Iphone 中的 safari 浏览器外，它在所有浏览器中都能正常工作。
Is there any trick to accomplish this task?
有什么技巧可以完成这项任务吗？
采纳答案by Mandeep Pasbola
Found an alternative.
找到了替代方案。
Just position the input type="file"over the custom button by absolute positioning it and use jQuery fadeTo('fast',0)to hide it.
只需type="file"通过绝对定位将输入放在自定义按钮上并使用jQuery fadeTo('fast',0)它来隐藏它。
Now if we click over the custom button file browser window appears.
现在，如果我们点击自定义按钮文件浏览器窗口就会出现。
Its working in all desktop browsers but not in iPhone& iPadas they don't allow to upload any file.
它适用于所有桌面浏览器，但不适用于iPhone&，iPad因为它们不允许上传任何文件。
回答by Sattu
Instead of trigger("click")you can use the following code which works successfully in all browsers:
相反的trigger("click")，你可以使用下面的代码在所有浏览器成功的作品：
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
document.getElementById(elem_id).dispatchEvent(evt);
回答by rajansoft1
make the element visible, as trigger event doesnt work on hidden elements in mac safari.
使元素可见，因为触发事件对 mac safari 中的隐藏元素不起作用。
回答by John Erck
The following approach did the trick for me:
以下方法对我有用：
$(".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");
});
});
回答by Trython
Its better to use CSS instead of JS to hide element because it will render your element as hidden directly.
最好使用 CSS 而不是 JS 来隐藏元素，因为它会将您的元素直接呈现为隐藏。
回答by ceejayoz
Browsers can be very finicky when it comes to JavaScript interactions with file inputs, for security reasons. Safari prevents you from firing any click events on them. Some versions of Chrome and Firefox also have this restriction. This has been previously discussed here.
出于安全原因，当涉及到 JavaScript 与文件输入的交互时，浏览器可能非常挑剔。Safari 会阻止您对它们触发任何点击事件。某些版本的 Chrome 和 Firefox 也有此限制。这已在此处讨论过。
回答by noypiscripter
.click() is not supported in Safari. Sattu's suggestion should work. But you don't need Javascript for customizing input file button.
.click() 在 Safari 中不受支持。萨图的建议应该有效。但是您不需要 Javascript 来自定义输入文件按钮。
<label><input type="file" id="file" name="file" style="position:absolute; left:-9999px;" />Upload</label>
Reference: http://noypiscripter.blogspot.com/2014/04/simplest-cross-browser-custom-upload.html
参考：http: //noypiscripter.blogspot.com/2014/04/simplest-cross-browser-custom-upload.html
回答by Sam Grondahl
Not sure if anybody is reading this question anymore, but I recently had a similar issue with Safari, so I thought I'd share.
不确定是否有人再阅读这个问题，但我最近在 Safari 上遇到了类似的问题，所以我想分享一下。
First, as ceejayoz mentioned, see the discussion here: In JavaScript can I make a "click" event fire programmatically for a file input element?
首先，正如 ceejayoz 所提到的，请参阅此处的讨论：在 JavaScript 中，我能否以编程方式为文件输入元素触发“单击”事件？
The solution, then, if you do not want to use button positioning, is to display the file input button (remove the "display:none;") and instead hide it using "opacity:0;". You probably also want to absolute position it so it doesn't interact with other elements. Anyway, this way you can still use JS to activate the file input in all browsers.
那么，如果您不想使用按钮定位，解决方案是显示文件输入按钮（删除“display:none;”）并使用“opacity:0;”隐藏它。您可能还想绝对定位它，使其不与其他元素交互。无论如何，这样你仍然可以在所有浏览器中使用 JS 来激活文件输入。
回答by PIYUSH JAIN
simply remove "display:none"and use "visibility:hidden"and works cross browser.
只需删除“显示：无”并使用“可见性：隐藏”并跨浏览器工作。
回答by eighteyes
I got the simplest answer for this
我得到了最简单的答案
opacity : 0.01on your input file element
opacity : 0.01在您的输入文件元素上
