Why doesn't iPhone Safari trigger an event change to input type = file?

Question

There is an iPhone and you need to catch the change event on hidden input. When it opens on the PC, it works, I see the text changed . In case I open it on the iPhone, it does not work properly, I just see the open dialog .

A simple jsfiddle demonstrates this .

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

and

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

What about him? Is this a new iOS bug? Afaik, he worked just a month ago.

I tried replacing hidden with opacity:0 , it works for simple jsfiddle, but does not work in a complex project with a hidden sidebar. The question is as follows. How to make a simple fix and what has recently changed (some Safari update?), What caused the change in hidden input behavior?

Answer 1

you can use the for label property. The following code may be useful 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 your own style for your download button

However, in some mobile browsers, when you download the file again, if the file is the same as before, it does not fire the change event, you use the reset form method to clear the 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>