为什么iPhone的Safari触发器不会在input type = file上更改事件？

问题描述：

有一部iPhone，需要在隐藏的输入上捕获更改事件。在PC上打开时，它可以工作，我看到已更改文本。如果我在iPhone上打开它没有按预期工作，我只看到打开对话框。

There is an iPhone and need to catch change event on a hidden input. When opened at PC, it works, I see changed text. In case I open it on an iPhone it doesn't work as expected, I just see open dialog.

简单的 jsfiddle演示了这一点。

<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，它只在一个月前工作。

What's wrong with it? Is it a new bug of iOs? Afaik, it worked just a month ago.

我试图用 opacity替换 hidden ：0 ，它适用于简单的jsfiddle，但在隐藏侧栏的复杂项目中不起作用。问题如下。如何进行一个简单的修复和最近发生的变化（一些Safari更新？），导致隐藏输入行为的变化？

I tried to replace hidden with opacity:0, it works for simple jsfiddle, but doesn't work in complex project with hiding sidebar. The question is the following. How to make a simple fix and what has changed recently (some Safari update?), that caused the change of hidden input behaviour?

答

您可以使用获取标签的属性。
以下代码可能对您有所帮助：

you can use for property of label. the following code may be helpful for you:

$('#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>

使用标签，你可以使用自定义样式上传按钮

using label, you can use custom style for your upload button

但是，在某些移动浏览器中，当你再次上传文件时，如果文件与之前相同，那么不会触发更改事件，您使用重置 表格清除文件：

However, in some mobile browsers, when you upload file again, if the file is same with before, it won't trigger change event, you use reset method of form to clear file:

 $('#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>

为什么iPhone的Safari触发器不会在input type = file上更改事件？

相关推荐