Safari trên iOS 9 không kích hoạt sự kiện nhấp chuột trên tệp đầu vào bị ẩn

Question

Tôi có trang web có trường tải lên nhưng input bị ẩn với display: none; và tôi có một số div để gọi hành động này.

Nó hoạt động trên iOS 8, nhưng bây giờ sau khi cập nhật iOS 9, không có gì xảy ra khi tôi chạm vào div.

Tôi đã thử sử dụng [0].click() hoặc VanillaJS thuần túy như document.getElementById('file_input').click() và không có gì hoạt động.

Tất cả những phương pháp làm việc giữa iOS 5 và iOS 8.

Nếu bạn muốn, liên kết với ví dụ này trên 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

Ba điều đang gây ra vấn đề này:

1. Tại javascript, xóa return false; trình xử lý sự kiện.

2. Tại biểu định kiểu, phần tử gọi hành động phải có thuộc tính cursor: pointer;. Có lẽ Apple đặt yêu cầu này trong các cuộc gọi này để có phản hồi tốt nhất trên giao diện người dùng.

3. Một lần nữa trong biểu định kiểu, chúng tôi không thể đặt display: none; cho mục nhập bị ẩn vì một số trình duyệt không chấp nhận nhấp chuột vào các yếu tố không được hiển thị.

Link to fixed example on JSFiddle

Answer 2

Cố gắng loại bỏ touchstart sự kiện từ tập tin JS hoặc thay thế nó với mousedown sự kiện.

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

Answer 3

Đưa <input type="file"/> trên đầu trang của các nút giả với position: absolute và opacity: 0 công trình. Bạn cũng có thể cần phải đặt chỉ mục z chính xác và tạo chiều rộng và chiều cao đầu vào 100% để nó nắm bắt được nhấp chuột lên đầu nút.

Nguồn: https://forums.meteor.com/t/webkit-on-ios-ignores-trigger-click-on-file-input/29828