Question

如何检测文件输入对话框当前是否已打开？

我正在尝试将一些文件上传功能集成到我正在构建的Web应用程序的弹出（引导样式）模型中。作为模型行为的一部分，如果按下escape，则关闭模型。

这一切都很好，直到我从打开的模型打开一个文件输入对话框，如果我点击转义关闭输入对话框，它也会关闭模型。

我想要实现的超简化版本 http://jsfiddle.net/ckevy/1/

Answer 1

尝试解决这个问题：

当用户点击文件选择输入时，请将其设为焦点：$(el).focus()。

然后，只要用户点击ESC，查看$（'：focus'）元素是否是文件选择输入。在这种情况下，blur（）输入并且不关闭模态。最坏的情况 - 用户想要关闭模态，按下ESC并且没有任何反应[1]。想想“wtf”，再次按ESC，模态应该关闭。只需确保文件选择输入确实在所有可能的情况下得到关注 - 通过输入标签等。如果您使用第三方上传器并且我所说的不起作用 - 请查看该上传器如何包装文件选择自定义链接或按钮，以及在不同情况下实际接收点击事件的内容（例如，当您选项卡时，输入可能会收到事件，当您单击时，它可能是链接）。总的来说，使用我所描述的警告来处理这个问题是可行的。

这与扩展-s的工作原理相似（只需检查ESC被点击时没有聚焦）。

当您需要blur()文件选择输入时，您将无法检测到所有情况。它不是跨浏览器的解决方案。甚至FF需要调整工作。我一直在测试webkit上有积极的结果，在其他浏览器中它可能不起作用。

Answer 2

在我的情况下，在jQuery上运行此代码：

// esc must close popup
$("body").keyup(function(e) {
    if (27 == e.keyCode) {
        hidepopup();
    }
});

// input in popup
var $file = $("input:file");
// keyup will be catched for input, not for body
$file.bind("click", function(e) {
    $(this).focus();
});
// keyup catching will be changed back to body after selecting file
$file.bind("change", function(e) {
    $(this).blur();
});
// we catched esc keyup, so change esc catching back to the body
$file.keyup(function(e) {
    if (27 == e.keyCode) {
        $(this).blur();
        // i don't know, why it works with return false, because i am not js programmer ), but cancelBubble or e.preventDefault is not working
        return false;
    }
});

Answer 3

我不相信你实际上可以直接控制对话本身。在某些浏览器（如FF）中，人们可以在一定程度上操作对话框，但这并不适用于所有浏览器和所有浏览器版本。

最简单的方法是在打开文件窗口之前禁用模型对话框上的快捷键。

Answer 4

基于尼基塔的回答。如果在触发代码之前检查焦点在输入字段上，则解决了问题：

$('input[type="file"]').on('keydown',function(e){

    //Prevents code from firing if file browser is open
    if($(this).is(':focus')){

        //run code here that should only be applied when the dialog box is closed

    }

});

检测文件输入对话框是否已打开

4 个答案: