iOS 9上的Safari浏览器无法在隐藏的文件输入框上触发点击事件。

Question

我有一个带有上传字段的网站，但是标签被隐藏了，使用"display：none;"，我有一个

标签来调用此操作。

iOS 8上有效，但现在更新到iOS9后，当我点击

标签时没有任何反应。

我尝试使用[0].click()或纯VanillaJS，如document.getElementById('file_input').click()，但都无效。

所有这些方法在iOS5到iOS8之间都有效。

如果需要，请参考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>

- Hugo Demiglio

Answer 1

这个问题有三个原因：

1. 在JavaScript中，移除事件监听器的return false;。

2. 在样式表中，调用该操作的元素必须具有属性cursor: pointer;。可能是由于苹果想要为用户界面提供更好的反馈而对这些调用设置了要求。

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

查看在JSFiddle上修复的示例链接

- Hugo Demiglio

---

同样的问题。我移除了"display none"并将"input type file"的光标改为"pointer"。在iOS中仍然没有反应 :( :( - Mahi

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

- Henri Toivar

Answer 3

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

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

- Aleks Dorohovich

---

问题不在于事件处理，正确的触发器是touchstart。当您尝试在事件处理程序内部执行.click()操作时，问题就会出现在输入文件字段上。 - Hugo Demiglio

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>

- Phil.Ng