为啥 iPhone 的 Safari 不触发输入类型 = 文件的更改事件?

Posted

技术标签:

【中文标题】为啥 iPhone 的 Safari 不触发输入类型 = 文件的更改事件?【英文标题】:Why doesn't iPhone's Safari trigger changed event on input type=file?为什么 iPhone 的 Safari 不触发输入类型 = 文件的更改事件? 【发布时间】:2017-08-16 23:34:17 【问题描述】:

有一部 iPhone,需要在隐藏的输入上捕获 change 事件。在 PC 上打开时,它可以工作,我看到 changed 文本。如果我在 iPhone 上打开它,它不能按预期工作,我只会看到 open dialog

简单的jsfiddle demonstrates this。

<input type=file style="display:none" id=file>
<button type=button id=but>open</button>

<div id=out>
</div>

$(document).ready(function()
  $('#but').on('click touchend', function()
    $('#out').text('open dialog'); 
    $('#file').click();
  );
  $('#file').on('change', function(evt) 
    $('#out').text('changed');
  );
);

它有什么问题?难道是ios的新bug? Afaik,它在一个月前才起作用。

我尝试将hidden 替换为opacity:0,它适用于简单的jsfiddle,但不适用于隐藏侧边栏的复杂项目。问题如下。如何进行简单的修复以及最近发生了什么变化(一些 Safari 更新?)导致隐藏输入行为的变化?

【问题讨论】:

尝试删除 display:none css 样式,如果可行,请尝试 opacity:0,css 可能会阻止该操作(我相信过去这是一个问题) 嗯。该技巧适用于 Safari 和 iPhone5S 上的 Chrome。这是什么字节? 您是在 Iphone 浏览器中运行它还是在类似 android 的 webview 中运行它?如果我理解正确,您希望人们可以上传文件吗?但这并没有发生它没有打开文件管理器?我是对的还是我理解错了? 它是 Safari 浏览器。对,我想要一个 ajax 上传。 我很难重现这种情况,因为我所有的 iOS 都可以在您的代码中正常工作。您使用的是哪个 iOS 版本?您是否考虑过将输入文件元素放在按钮顶部,给出opactity:0; 并使大小与按钮相同?这个技巧应该总是有效的。 【参考方案1】:

您可以使用labelfor 属性。 以下代码可能对您有所帮助:

$('#file').on('change', function () 
  $('.button').text('changed')
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' style='display:none' id='file'>
<label for='file' class='button'>open</label>

使用label,您可以为上传按钮使用自定义样式

但是,在某些手机浏览器中,当你再次上传文件时,如果文件与之前相同,则不会触发change事件,你可以使用formreset方法来清除文件:

 $('#file').on('change', function () 
      $('.form')[0].reset()
      $('.button').text('changed')
    )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='form'>
  <input type='file' style='display:none' id='file'>
    <label for='file' class='button'>open</label>
</form>

【讨论】:

太棒了。有用。我刚刚用label 标签更改了&lt;a&gt;,我看到了changed 事件。但为什么呢? 适用于 Chrome 和 Safari。谢谢。

以上是关于为啥 iPhone 的 Safari 不触发输入类型 = 文件的更改事件?的主要内容,如果未能解决你的问题,请参考以下文章

Safari浏览器(iPhone模拟器):如何查看/监控所有被触发的事件?

iPhone 上的 Safari 不允许在字段中输入文本

为啥我的 Mobile Safari 缓存不会清除?

带有 Safari 的 iPhone 无法正确解释 @media

iPhone Mobile Safari:强制键盘打开

css 关闭iPhone / Safari输入元素四舍五入