Safari auf iOS 9 löst keine Klickereignis auf versteckte Eingabedatei

Question

Ich habe eine Website mit einem Upload-Feld, aber die input ist mit display: none; versteckt und ich habe eine div für den Aufruf dieser Aktion.

Es funktionierte auf iOS 8, aber jetzt nach dem iOS 9-Update passiert nichts, wenn ich im div berühre.

Ich habe versucht mit der [0].click() oder reinen VanillaJS wie document.getElementById('file_input').click() und nichts funktioniert.

Alle diese Methoden funktionieren zwischen iOS 5 und iOS 8.

Wenn Sie möchten, Link zu diesem Beispiel auf 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>

Answer 1

Drei Dinge verursachen Dieses Problem:

1. Bei JavaScript entfernen 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 für die beste Rückmeldung über die Benutzeroberfläche eingefügt.

3. Wieder können wir im Stylesheet display: none; nicht für versteckte Eingabe einstellen, da einige Browser keine Klicks auf Elemente akzeptieren, die nicht angezeigt werden.

Link to fixed example on JSFiddle

Answer 2

Try touchstart Ereignis von JS-Datei entfernen bzw. mit mousedown Ereignisse ersetzen.

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

Answer 3

Inbetriebnahme des <input type="file"/> oben auf dem falschen Knopf mit position: absolute und opacity: 0 funktioniert. Sie müssen möglicherweise auch den richtigen Z-Index festlegen und die Eingabe zu 100% Breite und Höhe machen, damit der Klick über der Schaltfläche abgefangen wird.

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