Safari on iOS 9 Does Not Trigger Click Event on Hidden Input File

Safari on iOS 9 does not trigger click event on hidden input file

Three things are causing this problem:

1. At javascript, removing return false; of the event listener.

2. 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.

3. 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

calling click event of input doesn't work in Safari

The issue is completely solved. The point is element of input[type=file] must not be display: none. Look at sample below:

function click(el) {
  // Simulate click on the element.
  var evt = document.createEvent('Event');
  evt.initEvent('click', true, true);
  el.dispatchEvent(evt);
}

document.querySelector('#selectFile').addEventListener('click', function(e) {
  var fileInput = document.querySelector('#inputFile');
  //click(fileInput); // Simulate the click with a custom event.
  fileInput.click(); // Or, use the native click() of the file input.
}, false);

<input id="inputFile" type="file" name="file" style="visibility:hidden; width:0; height:0">
<button id="selectFile">Select</button>

Jquery trigger click not working on safari browsers in mac, Ipad & Iphone

Found an alternative.

Just position the input type="file" over the custom button by absolute positioning it and use jQuery fadeTo('fast',0) to hide it.

Now if we click over the custom button file browser window appears.

Its working in all desktop browsers but not in iPhone & iPad as they don't allow to upload any file.

javascript file input onchange not working [ios safari only]

I'll be damned: on iOS safari two extra conditions are necessary compared to other browsers:

1) The input must be actually appended to the DOM.

2) setting .onchange won't work: addEventListener must be used instead.

onclick event doesn't work on iphone

Do not set display:none on <input>,you can set height:0px instead.

EDIT:

I checked my note, find that there has been a same question on stackoverflow.

the same question is here.

Three things are causing this problem:

1. At javascript, removing return false; of event listener.

2. 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 user interface.

3. Again at the stylesheet, we can't
   setting display: none; for hidden input because some browsers don't
   accept clicks on elements that aren't displayed.

jQuery trigger not working in Safari

This is quite a common problem, although the correct cross-browser way to achieve this is by making the input type="file" transparent and positioned absolutely above the desired click element.

Something like this:

<div class="file-wrap">
  <span>Click me</span>
  <input type="file" />
</div>

CSS:

.file-wrap{
  position: relative;
}
input[type="file"]{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

This way, the user thinks they're clicking on whatever you style your span to be, but you've been sneaky and placed your file input above it.

A quick note: Don't put it inside a <button></button> - IE doesn't like this and removes the input type="file" completely with no error messages when it parses the page.

---

Related Topics