wake-up-neo.net

Safari unter iOS 9 löst kein Klickereignis für die ausgeblendete Eingabedatei aus

Ich habe eine Website mit einem Upload-Feld, aber die input ist mit display: none; ausgeblendet, und ich habe eine div zum Aufrufen dieser Aktion.

Es hat auf iOS 8 funktioniert, aber nach dem iOS 9-Update passiert nichts, wenn ich im div anfasse.

Ich habe versucht, die [0].click() oder pure VanillaJS wie document.getElementById('file_input').click() zu verwenden, und nichts funktioniert.

Alle diese Methoden funktionieren zwischen iOS 5 und iOS 8.

Wenn Sie möchten, verknüpfen Sie dieses Beispiel in 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

Drei Probleme verursachen dieses Problem:

  1. Bei Javascript entfernen Sie return false; des Ereignis-Listeners.

  2. Im Stylesheet muss das Element, das die Aktion aufruft, die Eigenschaft cursor: pointer; haben. Wahrscheinlich hat Apple diese Anforderung in diese Aufrufe aufgenommen, um die Benutzeroberfläche bestmöglich zu bewerten.

  3. Im Stylesheet können wir display: none; nicht für ausgeblendete Eingaben festlegen, da einige Browser keine Klicks auf Elemente akzeptieren, die nicht angezeigt werden.

Link zu festem Beispiel auf JSFiddle

8
Hugo Demiglio

Wenn Sie <input type="file"/> auf die falsche Schaltfläche mit position: absolute und opacity: 0 setzen, funktioniert dies. Möglicherweise müssen Sie auch den korrekten Z-Index einstellen und die Eingabe auf 100% Breite und Höhe festlegen, damit der Klick oben auf der Schaltfläche erscheint.

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

1
Henri Toivar

Versuchen Sie, das touchstart-Ereignis aus der JS-Datei zu entfernen, oder ersetzen Sie es durch das mousedown-Ereignis.

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

0
Aleks Dorohovich