iOS 9 上的 Safari 不會觸發隱藏輸入文件的點擊事件

Question

我有一個帶有上傳字段的網站，但是input被隱藏了display: none; 我有一個用於調用此操作的div 。

它適用於 iOS 8，但現在在 iOS 9 更新后，當我在 div 中觸摸時沒有任何反應。

我試過使用[0].click() .click [0].click()或像document.getElementById('file_input').click()這樣的純 VanillaJS ，但沒有任何效果。

所有這些方法都適用於 iOS 5 和 iOS 8。

如果需要，請鏈接到 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

導致此問題的三個原因：

1. 在 javascript 中，刪除return false; 事件監聽器。

2. 在樣式表中，調用動作的元素必須具有屬性cursor: pointer; . 可能蘋果在這些呼吁中提出了這個要求，以獲得對用戶界面的最佳反饋。

3. 再次在樣式表中，我們不能設置display: none; 對於隱藏輸入，因為某些瀏覽器不接受對未顯示元素的點擊。

鏈接到 JSFiddle 上的固定示例

Answer 2

將<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

Answer 3

嘗試從 JS 文件中刪除touchstart事件或將其替換為mousedown事件。

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

Answer 4

那么顯然它只是一個 jQuery 的東西。 此頁面顯示它可以工作。

https://codepen.io/VincentBel/pen/wqQOGr

<input id="fileInput" type="file" style='display:none'/>
<button id="button" type="button" onClick="document.getElementById('fileInput').click()">trigger file selection</button>