9

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

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

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

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

4

4 回答 4

4

尝试像这样解决它：

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

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

这同样适用于扩展的 -s（只需检查按下 ESC 时选择是否没有聚焦）。

blur()当您需要文件选择输入时，您将无法检测到所有情况。这不是一个跨浏览器的解决方案。即使是FF也需要调整才能工作。我一直在测试 webkit 并取得了积极的结果，在其他浏览器中它可能无法正常工作。

于 2012-09-30T16:37:51.363 回答
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;
    }
});
于 2013-06-25T11:03:49.893 回答
1

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

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

于 2012-07-25T10:13:36.707 回答
0

根据尼基塔的回答。如果您在触发代码之前检查输入字段的焦点，它可以解决问题：

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

    }

});
于 2017-01-06T01:19:21.653 回答