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

我有一个网站上传字段，但input隐藏display: none; 我有一个调用这个动作的div 。

它在iOS 8上工作，但是现在在iOS 9更新之后，当我在div中触摸时，没有任何反应。

我尝试使用[0].click() .click [0].click()或纯的VanillaJS像document.getElementById('file_input').click()并没有什么作品。

所有这些方法都可以在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; 对于隐藏的input，因为某些浏览器不接受对未显示的元素的点击。

链接到JSFiddle上的固定示例

Answer 2

将<input type="file"/>放在伪button的顶部， position: absolute和opacity: 0 。 您可能还需要设置正确的Z-索引，并使input100％的宽度和高度，以便捕捉button顶部的点击。

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

Answer 3

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

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