jQuery Mobile在Opera Mobile中調用單擊或點擊隱藏輸入[type = file]

Question

我有一個要上傳圖像的表單，因此顯然有一個input。[type = file]帶有.image-upload類，但是由於看起來很丑，所以我將其隱藏了（顯示：無），而是有一個漂亮的我說要上傳（class .upload）和點擊的按鈕，我想觸發input [type = file]元素的點擊/單擊事件，以便用戶隨后可以上傳圖像。

以下代碼在台式機上運行，​​但在移動設備上不行。 如果我將.click更改為下面的.tap，則無處工作？

$(document).bind('pageshow', function() {
    $('.ui-page-active .upload').tap(function() {
        $('.ui-page-active .image-upload').click();
        return false;
    });
});

---

更新，我從沒想過這可能是特定於瀏覽器的問題，但是此代碼可在普通的Android瀏覽器中使用，而不能在Opera中使用。

Answer 1

像OP我有同樣的問題，但它是用默認的Android瀏覽器（4.4.2）。 隱藏文件輸入字段后，即使單擊它也無法觸發單擊。 我通過使輸入元素在技術上保持可見（即，省略display:none屬性）並將其移出屏幕來修復了該問題。 例如，HTML是這樣的：

<div style="height:1px;width:1px;overflow:hidden;margin-left:-999px">
    <input id="photoInput" type="file" accept="image/*" capture>
</div>
<input id="takePhoto" type="button" value="Take photo">

JS是：

$('#takePhoto').tap(function() {
    $("#photoInput").trigger('click');
});

請注意，點擊事件會在輸入字段上觸發點擊事件。 我無法將tap事件與觸發器配合使用。 該代碼可在我的Android股票瀏覽器和Opera移動瀏覽器vers上使用。 21.0.01437

Answer 2

使用jQuerymobile，最好使用vclick等虛擬事件。 按照以下方式給予幫助

$(document).bind('pageshow', function() {

    $('.ui-page-active .upload').tap(function() {
        $('.ui-page-active .image-upload').trigger("vclick");
        return false;
    });
});

Answer 3

試試這個嗎？ 演示http://jsfiddle.net/yeyene/5kfnT/1/

JQUERY

$(document).ready(function(){
    $(function() {
        // Bind the tapHandler callback function to the tap event on div.box
        $( ".upload" ).on( 'vclick', tapHandler ); 
        // Callback function references the event target and adds the 'tap' class to it
        function tapHandler() {
            $('.image-upload').trigger('click');
        }
    });

    $('.image-upload').click(function(){
        alert('Upload image!');
        // your upload image script here
    });
});