Question

我希望用户点击一个div，其下面有一个选择框，display：none，所以用户点击该div，然后会出现选项。在移动设备中，应该会显示带有选项的原生弹出窗口（这在这里没有问题）

主要问题是其中一个主要选项是第3个选项，用户可以上传＆＃34;文件＆＃34;在服务器上，从计算机上。

因此应该打开文件上传对话框。

它适用于：用于Windows桌面的chrome。

除了：safari（Mac / iOS）或chrome（适用于Mac / iOS），虽然适用于Mac的firefox可以使用（版本直到52）。为什么这么多差异..这是一个错误与否？

我理论上该事件是从select html元素的onchange事件中触发的，因此应该考虑＆＃34;用户上下文＆＃34;起源。 onchange函数将调用＆＃34; click＆＃34;在文件上传html元素，触发它打开文件上传对话框。

- 版本52或更早版本中的Firefox行为会触发＆＃34;弹出窗口＆＃34;虽然我不认为这应该被视为一个弹出窗口，因为它不是像那些＆＃34;广告＆＃34;弹出窗口，它是一个用于上传的本地Windows UI ...

检查这个jbin [jsBin] [1]

＆＃13;

$( document ).ready(function() {
    $("#test").change(function(event){   
        if($(this).val()==3) {
           //open the file uploader
           $("#test2").focus().click();
        }
        $(this).val(null); //reset the on change value;
    });
});

＆＃13;

.fakebtn{
    position:relative;display:inline-block;
    padding:10px; 
    background-color:#777; 
    color:white;
}

.styled_select{
    position:absolute; 
    opacity:0; top:0; 
    left:0px; 
    height:100%; 
    width:100%
}

＆＃13;

<!DOCTYPE html>
<html>
<head>  
            <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
            <h1>Please select file to create. 3rd Option works in desktop, not in mobile?</h1>
            <input style="display:none; " id="test2" type="file" />
            <br><br>
            <div class="fakebtn">
                <span>+</span>
                <select id="test" class="styled_select">
                    <option value="1">Create new blank page</option>
	    <option value="2">Create file from template 1</option>
	    <option value="3">Upload from your computer a file</option>
        </select>
    </div>
</body>
       </html>

＆＃13;

从某些浏览器

0 个答案: