为啥 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】:
您可以使用label
的for
属性。
以下代码可能对您有所帮助:
$('#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
事件,你可以使用form
的reset
方法来清除文件:
$('#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
标签更改了<a>
,我看到了changed
事件。但为什么呢?
适用于 Chrome 和 Safari。谢谢。以上是关于为啥 iPhone 的 Safari 不触发输入类型 = 文件的更改事件?的主要内容,如果未能解决你的问题,请参考以下文章
Safari浏览器(iPhone模拟器):如何查看/监控所有被触发的事件?