आईफोन की सफारी ट्रिगर ने इनपुट प्रकार = फ़ाइल पर ईवेंट क्यों नहीं बदला?

Question

एक आईफोन है और एक छिपे इनपुट पर change घटना पकड़ने की जरूरत है। पीसी पर खोले जाने पर, यह काम करता है, मैं changed पाठ देखता हूं। यदि मैं इसे किसी आईफोन पर खोलता हूं तो यह अपेक्षित काम नहीं करता है, मैं बस open dialog देखता हूं।

सरल jsfiddle demonstrates this।

<input type=file style="display:none" id=file> 
<button type=button id=but>open</button> 

<div id=out> 
</div> 

और

$(document).ready(function(){ 
    $('#but').on('click touchend', function(){ 
    $('#out').text('open dialog'); 
    $('#file').click(); 
    }); 
    $('#file').on('change', function(evt) { 
    $('#out').text('changed'); 
    }); 
}); 

इसके साथ क्या गलत है? क्या यह आईओएस का एक नया बग है? अफैक, यह सिर्फ एक महीने पहले काम किया था।

मैं opacity:0 साथ hidden को बदलने के लिए कोशिश की, यह आसान jsfiddle के लिए काम करता है, लेकिन साइडबार छुपा के साथ जटिल परियोजना में काम नहीं करता। सवाल निम्नलिखित है। एक साधारण फिक्स कैसे करें और हाल ही में क्या बदल गया है (कुछ सफारी अपडेट?), जिससे छुपा इनपुट व्यवहार में परिवर्तन हुआ?

Answer 1

आप forlabel की संपत्ति का उपयोग कर सकते हैं। निम्नलिखित कोड आप के लिए सहायक हो सकता है:

$('#file').on('change', function() { 
 
    $('.button').text('changed') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='file' style='display:none' id='file'> 
 
<label for='file' class='button'>open</label>

label उपयोग कर, आप कस्टम शैली अपने अपलोड बटन के लिए, जब आप फ़ाइल अपलोड उपयोग कर सकते हैं

हालांकि कुछ मोबाइल ब्राउज़र में दोबारा, अगर फ़ाइल पहले के समान है, तो यह change ईवेंट ट्रिगर नहीं करेगा, आप फ़ाइल को साफ़ करने के लिए form की विधि का उपयोग करें:

$('#file').on('change', function() { 
 
     $('.form')[0].reset() 
 
     $('.button').text('changed') 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class='form'> 
 
    <input type='file' style='display:none' id='file'> 
 
    <label for='file' class='button'>open</label> 
 
</form>