iPhoneのSafariトリガーが入力タイプ=ファイルでイベントを変更しないのはなぜですか？

Question

iPhoneがあり、隠し入力にchangeイベントをキャッチする必要があります。 PCで開くと、それは動作します、私はchangedテキストを参照してください。私がiPhone上でそれを開く場合、それは期待どおりに動作しません、私はちょうど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'); 
    }); 
}); 

？それはiOの新しいバグですか？ Afaik、それはちょうど1ヶ月前に働いた。

hiddenをopacity:0に置き換えようとしましたが、単純なjsfiddleで動作しますが、サイドバーを隠している複雑なプロジェクトでは機能しません。問題は次のとおりです。シンプルな修正方法と、最近変更されたもの（Safariのアップデートの一部）は、隠れた入力動作の変化を引き起こしましたか？

Answer 1

forのプロパティはlabelです。 次のコードは、あなたのために役立つことがあります。

labelを使用して

$('#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>

ファイルをアップロードするとき、あなたは、いくつかのモバイルブラウザでは、しかし、あなたのアップロードボタン

のためのカスタムスタイルを使用することができます再び、ファイルが以前と同じ場合、それはchangeイベントをトリガーしませんresetメソッドの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>