web-dev-qa-db-ja.com

iOS 9のSafariは、非表示の入力ファイルでクリックイベントをトリガーしません

アップロードフィールドのあるWebサイトがありますが、inputは_display: none;_で非表示になっており、このアクションを呼び出すためのdivがあります。

IOS 8で動作しましたが、iOS 9のアップデート後、divをタッチしても何も起こりません。

[0].click()またはdocument.getElementById('file_input').click()のような純粋なVanillaJSを使用してみましたが、何も機能しません。

これらの方法はすべて、iOS5とiOS8の間で機能します。

必要に応じて、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>_
javascriptiossafarimobile-safariios9
10
Hugo Demiglio

この問題の原因は次の3つです。

  1. Javascriptで、イベントリスナーのreturn false;を削除します。

  2. スタイルシートでは、アクションを呼び出す要素のプロパティはcursor: pointer;である必要があります。おそらくAppleこれらの呼び出しにこの要件を入れて、ユーザーインターフェイスに関する最良のフィードバックを求めてください。

  3. 繰り返しになりますが、スタイルシートでは、表示されていない要素のクリックを受け入れないブラウザがあるため、非表示の入力にdisplay: none;を設定することはできません。

JSFiddleの修正例へのリンク

8
Hugo Demiglio

<input type="file"/>とposition: absoluteを使用して偽のボタンの上にopacity: 0を配置すると機能します。また、正しいz-indexを設定し、入力を100％の幅と高さにして、ボタンの上部のクリックをキャッチする必要がある場合もあります。

ソース： https://forums.meteor.com/t/webkit-on-ios-ignores-trigger-click-on-file-input/29828

1
Henri Toivar

JSファイルからtouchstartイベントを削除するか、mousedownイベントに置き換えてみてください。

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