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

Question

我该如何检测文件输入对话框是否打开？

我正在尝试将一些文件上传功能集成到一个弹出式(bootstrap样式)模型中，在我正在构建的Web应用程序中。作为模型的行为的一部分，如果按下ESC键，模型将关闭。

这都很好，直到我从打开的模型中打开文件输入对话框，如果我按下ESC键关闭输入对话框，模型也将关闭。

我正在尝试实现的一个超级简化版http://jsfiddle.net/ckevy/1/

- Doug

Answer 1

尝试这样解决:

当用户点击文件选择输入时，给它聚焦：$(el).focus()。

然后，任何时候当用户按下ESC键时，检查$(':focus')元素是否是文件选择输入。如果是，则使其失焦(blur())，并且不要关闭模态框。最坏的情况是，用户想要关闭模态框，按下ESC键却没有反应[1]。 用户会感到困惑，再次按下ESC键，模态框就会像应该关闭一样。只要确保在所有可能的情况下都会使文件选择输入获得焦点，例如通过选项卡浏览输入等。如果您使用第三方上传器而我的建议无效，请查看上传器如何将文件选择包装在自定义链接或按钮中，以及在不同情况下接收点击事件的实际对象(例如，在您点击时，链接可能接收事件，而在您使用选项卡时，输入可能接收事件)。总的来说，有一个我描述过的小缺陷，但可解决。

这对于扩展-s也同样适用(只需检查选择是否聚焦即可)。

您将无法检测到需要使文件选择输入失焦的所有情况。它不是跨浏览器的解决方案。甚至FF也需要调整才能正常工作。我已经在webkit上进行了测试，并获得了良好的结果，在其他浏览器中可能不起作用。

- Nikita

---

我认为大多数人会点击“取消”按钮而不是ESC键；这种解决方案不支持这种操作。 - Steven Vachon

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;
    }
});

- dkop

Answer 3

我不相信你实际上能够直接控制对话框本身。在某些浏览器中，比如火狐浏览器，人们已经能够在一定程度上操纵对话框，但这并不适用于所有浏览器和所有浏览器版本。

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

- Sammaye

---

当弹出窗口出现时（文件输入的点击事件），禁用键盘是相对容易的，但据我所知，无法判断用户何时关闭了对话框。不幸的是，弹出对话框不会触发$(window).blur事件，否则我可以在窗口失去焦点时让它消失。 - Doug

@Dolondro 实际上，文件上传对话框有时（例如在IE8中）实际上根本没有连接到浏览器，而是操作系统特定的元素，因此不会调用这些。禁用模态对话框上的快捷键是一件丑陋的事情，因为您必须让用户按取消，但我认为这是唯一的方法。 - Sammaye

Answer 4

基于 Nikita 的回答。如果在触发代码之前检查输入字段上的焦点，它就可以解决这个问题：

$('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

    }

});

- Daniel Tonon