web-dev-qa-db-fra.com

Safari sur iOS 9 ne déclenche pas d'événement de clic sur un fichier d'entrée masqué

J'ai un site Web avec un champ de téléchargement, mais la input est masquée avec display: none; et j'ai une div pour appeler cette action.

Cela fonctionnait sur iOS 8, mais maintenant, après la mise à jour iOS 9, rien ne se passe lorsque je touche dans le div.

J'ai essayé d'utiliser la fonction [0].click() ou pure VanillaJS telle que document.getElementById('file_input').click() et rien ne fonctionne.

Toutes ces méthodes fonctionnent entre iOS 5 et iOS 8.

Si vous le souhaitez, créez un lien vers cet exemple sur 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>

javascriptiossafarimobile-safariios9
10
Hugo Demiglio

Trois choses causent ce problème:

  1. En javascript, suppression de return false; du programme d'écoute d'événement.

  2. Dans la feuille de style, l'élément qui appelle l'action doit avoir la propriété cursor: pointer;. Apple a probablement mis cette exigence dans ces appels pour obtenir les meilleurs commentaires sur l'interface utilisateur.

  3. Encore une fois, dans la feuille de style, nous ne pouvons pas définir display: none; pour une entrée masquée, car certains navigateurs n'acceptent pas les clics sur des éléments non affichés.

Lien vers l'exemple fixe sur JSFiddle

8
Hugo Demiglio

Mettre le <input type="file"/> au-dessus du faux bouton avec position: absolute et opacity: 0 fonctionne. Vous devrez peut-être également définir le bon indice z et rendre l’entrée 100% largeur et hauteur afin qu’elle capte le clic en haut du bouton.

Source: https://forums.meteor.com/t/webkit-on-ios-ignores-trigger-click-on-file-input/29828

1
Henri Toivar

Essayez de supprimer l'événement touchstart du fichier JS ou de le remplacer par l'événement mousedown.

$(document).on('click', '.upload-box', function(e){
  ...
});

0
Aleks Dorohovich