为什么iPhone的Safari触发器不会在输入类型=文件上更改事件？

Question

有一个iPhone,需要捕获change隐藏输入事件.在PC上打开时,它可以工作,我看到了changed文字.如果我在iPhone上打开它,它不会按预期工作,我只是看到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,它仅在一个月前发挥作用.

我试图取代hidden有opacity:0,它可以用于简单的jsfiddle,但在复杂的项目,隐藏侧边栏不起作用.问题如下.如何进行简单的修复和最近发生的变化(一些Safari更新？),导致隐藏输入行为的变化？

Answer 1

您可以使用for的属性label。以下代码可能对您有帮助：

$('#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事件，您可以使用reset以下方法form来清除文件：

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