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

【问题标题】：Simulating a file input click with .click() does not work in iOS - Cordova使用 .click() 模拟文件输入点击在 iOS 中不起作用 - Cordova
【发布时间】：2025-12-12 11:10:02
【问题描述】：

我正在使用 React 构建一个用 Cordova 包装的网络应用程序，使其成为 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 中）什么也没有发生。

这部分代码可以在网络浏览器和我的安卓模拟器中运行，但在我的 iOS 模拟器中再次不。

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

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

【问题讨论】：

你可以试试 $('#fileinput').get(0).click()。尝试使用基本的 js 点击方法，而不是 jQuery。

标签： javascript jquery ios cordova reactjs

【解决方案1】：

我遇到了同样的问题，这很有效：

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

并且不要隐藏文件输入，而是将其 css 关闭屏幕，例如：

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

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

【讨论】：

【解决方案2】：

我用：

document.getElementById("fileinput").discpatchEvent(new Event("click"))

【讨论】：