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

Question

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

它在 iOS 8 上工作，但现在在 iOS 9 更新后，当我触摸 div.

时没有任何反应

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

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

如果需要，link 到 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

三件事导致了这个问题：

在 javascript，删除事件侦听器的 return false;。
在样式表中，调用动作的元素必须有属性 cursor: pointer;。可能 Apple 在这些电话中提出了这个要求，以获得对用户界面的最佳反馈。
再次在样式表中，我们无法为隐藏输入设置 display: none;，因为某些浏览器不接受对未显示元素的点击。

Link to a fixed example on JSFiddle

Answer 2

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

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

Answer 3

将 <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 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>

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

Safari on iOS 9 does not trigger click event on hidden input file

javascript

safari

mobile-safari

ios

ios9