iOS 9 上的 Safari 不会触发隐藏输入文件的点击事件

Question

我有一个带有上传字段的网站，但是input被隐藏了display: none; 我有一个用于调用此操作的div 。

它适用于 iOS 8，但现在在 iOS 9 更新后，当我在 div 中触摸时没有任何反应。

我试过使用[0].click() .click [0].click()或像document.getElementById('file_input').click()这样的纯 VanillaJS ，但没有任何效果。

所有这些方法都适用于 iOS 5 和 iOS 8。

如果需要，请链接到 JSFiddle 上的此示例： https ://jsfiddle.net/o1r265tz/6/embedded/result/

 $(document).ready(function(){ $(document).on('click touchstart', '.upload-box', function(e){ e.stopPropagation(); $('.form-upload input.file-input').trigger('click'); $('.debug').append('<p>Clicked!</p>'); console.log('Clicked!'); return false; }); });

 .upload-box { border: 3px solid #999; padding: 10px; text-align: center; border-radius: 5px; font-size: 35pt; font-family: Arial; color: #555; } .form-upload { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="upload-box">Click here to upload =D</div> <form class="form-upload" enctype="multipart/form-data"> <input class="file-input" id="file_input" type="file"> </form> <div class="debug"></div>

Answer 1

导致此问题的三个原因：

1. 在 javascript 中，删除return false; 事件监听器。

2. 在样式表中，调用动作的元素必须具有属性cursor: pointer; . 可能苹果在这些呼吁中提出了这个要求，以获得对用户界面的最佳反馈。

3. 再次在样式表中，我们不能设置display: none; 对于隐藏输入，因为某些浏览器不接受对未显示元素的点击。

链接到 JSFiddle 上的固定示例

Answer 2

将<input type="file"/>放在带有position: absolute和opacity: 0的假按钮之上。 您可能还需要设置正确的 z-index 并使输入的宽度和高度为 100%，以便捕获按钮顶部的点击。

来源： https : //forums.meteor.com/t/webkit-on-ios-ignores-trigger-click-on-file-input/29828

Answer 3

尝试从 JS 文件中删除touchstart事件或将其替换为mousedown事件。

 $(document).on('click', '.upload-box', function(e){ ... });

Answer 4

那么显然它只是一个 jQuery 的东西。 此页面显示它可以工作。

https://codepen.io/VincentBel/pen/wqQOGr

<input id="fileInput" type="file" style='display:none'/>
<button id="button" type="button" onClick="document.getElementById('fileInput').click()">trigger file selection</button>