Question

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

<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的{{1}}属性。以下代码可能对您有所帮助：

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')
    })

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

1 个答案: