使用 .click() 模拟文件输入点击在 iOS 中不起作用 - Cordova

Question

我正在使用 React 构建一个用 Cordova 包装的 Web 应用程序，使其成为 android/iOS 上的本机应用程序。我在使用 iOS 时遇到了问题，特别是在模拟单击文件输入时.click()

我正在使用这个库：https : //github.com/odysseyscience/react-s3-uploader

这是我的代码，非常简单：

<button onClick={(e) => { e.preventDefault() $('#fileinput').click() }} className='btn btn--no-bg btn--w-icon uploader'>

带有 id 的元素fileinput是 react 上传器的渲染版本，但在纯 HTML 中看起来像这样：

<input type="file" id="fileinput" class="hidden react-s3" accept="image/*">

我做了一堆测试，问题出在.click()jquery 事件中。第一个onClick肯定是被触发的，但在$('#fileinput').click()调用时没有任何反应（在 iOS 中）。

这部分代码适用于 Web 浏览器以及我的 android 模拟器，但再次不适用于我的 iOS 模拟器。

当我进入所有三种环境（桌面、iOS、android）$('#fileinput').click()的控制台并在控制台中运行代码时，单击输入并为 android 和桌面触发照片选择，但在 iOS 上不执行任何操作。

我做了很多研究，我发现一些不起作用的解决方案是：添加pointer: cursor到按钮或输入，更改button为a标签，更改display:none为visibility: hidden隐藏输入，并尝试.click()我能找到的所有不同版本（vanillaJS ，.trigger，.touchstart，.touchend，.live，等等）

Answer 1

我遇到了同样的问题并且这有效：

$('#fileinput').trigger("click"); 

并且不要隐藏文件输入，而是将其隐藏在屏幕之外，如下所示：

#fileinput {
    position:absolute;
    top:-9999px;
}

我不认为你可以触发 iOS 中隐藏元素的点击