2

HTML5で作成したWebページをアプリ化したいと考えて、Monacaを試しております。
そこで1点、正しく動作しない箇所がありましたので質問させてください。

あるボタンをクリック時に、<input type="file" accept="image/*" />のクリックイベントをトリガーで呼び出すようにしました。
chromeでは期待した通りの動作なのですが、iPhoneで確認したところ、うまく動作しませんでした。
元々のHTML5のWebページでは、iPhoneでも正しく動作しています。

また2回続けてトリガーすると正しく動作しました。

Androidでは未確認です。

この現象がなぜ起こるのかと、回避方法(iOSだったら2回トリガーするという方法で正しいのかどうか)をご教授願えればと思います。
よろしくお願い致します。

ons.ready(function() {
    // iPhoneでは動作しない
    $('#button_a').on('click', function() {
        $('input[type="file"]').trigger('click');
    });

    // iPhoneで正しく動作する
    $('#button_b').on('click', function() {
        $('input[type="file"]').trigger('click').trigger('click');
    });
});

1 件の回答 1

0

iOSで2回トリガーすれば動作はするようですが、あまり良い方法ではないと思います(他に方法がなければ、バッドノウハウとして使うのは構わないと思います)
自分でも試してみたところ、キャンセル不能なイベントとしてディスパッチすれば、iOSでも正常に動作するようです。
サンプルコードは

$('#button_a').on('click', function() {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click",true,false);
    document.querySelector('input[type="file"]').dispatchEvent(evt);
});

です。
evt.initEventの第三引数をfalseにしているところがポイントで、cancelできないイベントとして指定することで、iOSでもうまく動作するようになりました。
jQueryではこのような指定は出来ないようなので、ちょっと対応するコードは分かりません。(誰かjQueryに詳しい方、分かればフォローお願いします)

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。