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

Posted 2023-02-23

【中文标题】iOS 9 上的 Safari 不会触发隐藏输入文件的点击事件

【英文标题】：Safari on iOS 9 does not trigger click event on hidden input file

【发布时间】：2015-09-22 04:38:36

【问题描述】：

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

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

我尝试过使用 [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>

【参考方案1】：

三个原因导致了这个问题：

在javascript中，移除事件监听器的return false;。

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

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

Link to a fixed example on JSFiddle

【讨论】：

同样的问题。我删除了 display none 并使光标指向输入类型文件的指针。 ios 什么也没发生 :( :(

【参考方案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

【参考方案3】：

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

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

【讨论】：

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

【参考方案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>