Safari on iOS 9 does not trigger click event on hidden input file
Solution 1
Three things are causing this problem:
-
At javascript, removing
return false;
of the event listener. -
At the stylesheet, the element which calls the action must have the property
cursor: pointer;
. Probably Apple put this requirement in these calls for best feedback on a user interface. -
Again at the stylesheet, we can't set
display: none;
for hidden input because some browsers don't accept clicks on elements that aren't displayed.
Link to a fixed example on JSFiddle
Solution 2
Putting the <input type="file"/>
on top of the fake button with position: absolute
and opacity: 0
works. You might also need to set the correct z-index and make the input 100% width and height so it catches the click on top of the button.
Source: https://forums.meteor.com/t/webkit-on-ios-ignores-trigger-click-on-file-input/29828
Related videos on Youtube
Hugo Demiglio
Updated on June 15, 2022Comments
-
Hugo Demiglio almost 2 years
I have a website with an upload field, but the
input
is hidden withdisplay: none;
and I have adiv
for calling this action.It worked on iOS 8, but now after the iOS 9 update, nothing happens when I touch in the div.
I've tried using the
[0].click()
or pure VanillaJS likedocument.getElementById('file_input').click()
and nothing works.All these methods work between iOS 5 and iOS 8.
If you want, link to this example on JSFiddle: https://jsfiddle.net/o1r265tz/6/embedded/result/
$(document).ready(function(){ $(document).on('click touchstart', '.upload-box', function(e){ e.stopPropagation(); $('.form-upload input.file-input').trigger('click'); $('.debug').append('<p>Clicked!</p>'); console.log('Clicked!'); return false; }); });
.upload-box { border: 3px solid #999; padding: 10px; text-align: center; border-radius: 5px; font-size: 35pt; font-family: Arial; color: #555; } .form-upload { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="upload-box">Click here to upload =D</div> <form class="form-upload" enctype="multipart/form-data"> <input class="file-input" id="file_input" type="file"> </form> <div class="debug"></div>
-
Hugo Demiglio over 8 yearsThe problem is not on event handling, and the correct trigger is touchstart. The problem occurs when you try to do .click() on input file field inside the event handler.
-
Mahi over 7 yearssame problem . i removed display none and made cursor to pointer for input type file . nothing happening in ios :( :(