Javascript截获"Ctrl + O"不会打开我的文件对话框

Question

<input type="file" id="browse-button"/>我的HTML中有一个文件浏览器输入.

我有另一个带ID的按钮choose-file-button,当点击时,会打电话document.getElementById("browse-button").click();.单击此按钮时,它会正确单击#browse-button并打开文件对话框.

现在,我从这个答案中获取代码来拦截一个Ctrl+O按键并打开我的文件对话框,所以我有这个:

$(window).bind('keydown', function(e)
{
    if (e.ctrlKey || e.metaKey)
    {
        switch (String.fromCharCode(e.which).toLowerCase())
        {
            case 's':
                e.preventDefault();
                // doesn't matter for this question
                return false;
            case 'o':
                e.preventDefault();
                document.getElementById("choose-file-button").click();
                return false;
        }
    }
    return true;
});

正如你所看到的,当我拦截时,Ctrl+O我点击我的#choose-file-button按钮,它document.getElementById("browse-button");在其onclick处理程序中调用.我在这个点击处理程序中放了一个断点,当我按下Ctrl+O它时会到达这个断点.但是,文件对话框永远不会显示.

通过调试,我发现如果我放alert(...);了#choose-file-button click()一行,那么警报会出现,并显示正常页面"打开文件"对话框(不是我的文件对话框).但是,如果我没有此警报,则根本不显示任何内容.

这是一个错误吗？如何修复它并通过截获显示我的文件对话框Ctrl+O？

编辑:我刚刚在Chrome中测试过,效果很好.但是,它仍然无法在Firefox中运行.

Answer 1

这里有一些浏览器安全魔法.当我使用超时或间隔或我尝试的任何其他方法时,代码正常进行,但浏览器只是拒绝打开文件上传对话框.这可能是故意的,以阻止恶意JS在未经同意的情况下尝试获取用户的文件.但是,如果绑定到链接上的单击事件,它将使用jQuery或常规JS完美地工作.

编辑:如所怀疑的,大多数浏览器会根据事件的类型以及是由用户创建还是以编程方式生成来跟踪事件是否可信.硒这个答案的全部细节.如您所见,由于键盘事件不在列表中,因此永远不会信任它们.

测试JSFiddle

<form action="#" method="post">
    <div>
        <input type="file" id="myfile" name="myfile" /> <a href="#" id="mylink" accesskey="o">Click me</a>
    </div>
</form>

$("#mylink").click(function () {
    $("#myfile").click();
});

$(window).bind('keydown', function (e) {
    if (e.ctrlKey || e.metaKey) {
        switch (String.fromCharCode(e.which).toLowerCase()) {
            case 'o':
                e.preventDefault();
                console.log("1a");

                $("#myfile").click();
                //alert("hello");

                console.log("1b");
                return false;
        }
    }
    return true;
});

我认为这里只有两种选择,它们都是解决方法,而不是解决方案.

• 一种是使用链接来触发文件上传对话框,并要求人们使用ALT + SHIFT + O而不是CTRL + O(因为我在示例中为链接添加了一个accesskey属性).
• 另一种方法是使用一种新的HTML5 JavaScript API进行拖放文件上传.

附录:我还尝试在Firefox中使用纯JavaScript来获取点击事件,并使用该isTrusted属性检查它是否可信.对于链接上的点击,它返回true.但是,尝试在其他地方存储和重新使用该事件不起作用,因为它已经在您获得引用时被分派.此外,不出所料,创建一个新事件并尝试设置isTrusted = true也不起作用,因为它是只读的.