Safari na iOS 9 nie wyzwala zdarzenia kliknięcia ukrytego pliku wejściowego.

Question

Mam witrynę internetową z polem do przesyłania, ale input jest ukryty pod numerem display: none; i mam div do wywoływania tej akcji.

To działało na iOS 8, ale teraz po uaktualnieniu do iOS 9 nic się nie dzieje po dotknięciu elementu div.

Próbowałem używać [0].click() lub czysty VanillaJS jak document.getElementById('file_input').click() i nic nie działa.

Wszystkie te metody działają między iOS 5 i iOS 8.

Jeśli chcesz, link do tego przykładu na 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

Trzy rzeczy są przyczyną ten problem:

1. W javascript, usuwanie return false; z detektora zdarzeń.

2. W arkuszu stylów element wywołujący akcję musi mieć właściwość cursor: pointer;. Prawdopodobnie Apple umieścił ten wymóg w tych wywołaniach, aby uzyskać najlepszą informację zwrotną na temat interfejsu użytkownika.

3. ponownie w arkuszu stylów, nie możemy ustawienie display: none; do ukrytego wejścia ponieważ niektóre przeglądarki nie akceptują kliknięcia elementów, które nie są wyświetlane.

Link to fixed example on JSFiddle

Answer 2

spróbować usunąć touchstart zdarzenie z pliku JS lub zastąpienie go mousedown imprezy.

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

Answer 3

Umieszczenie <input type="file"/> na górze przycisk fałszywego z position: absolute i opacity: 0 prac. Konieczne może być również ustawienie poprawnego indeksu Z i wprowadzenie wartości 100% szerokości i wysokości, tak aby przechwytywała kliknięcie na górze przycisku.

Źródło: https://forums.meteor.com/t/webkit-on-ios-ignores-trigger-click-on-file-input/29828