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

Question

我正在使用 React 构建一个用 Cordova 封装的 Web 应用程序，使其成为 Android/iOS 上的 native 应用程序。我在使用 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 uploader 的呈现版本，但在纯 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"); 

并且不要隐藏文件输入，而是像这样在屏幕外使用 css:

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

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