检测文件输入对话框是否打开 [英] Detecting if the file input dialog is open

问题描述

我试图将一些文件上传功能集成到一个弹出窗口（引导程序样式）中，模型在我正在建设的网络应用程序上。作为模型行为的一部分，如果按下了转义，模型将被关闭。

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

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

当用户点击文件选择输入时，将焦点放在： $（el）.focus（）。

然后，无论用户何时点击ESC，看看$（'：focus '）元素是文件选择输入。在这种情况下，模糊（）输入并且不关闭模态。最糟糕的情况 - 用户想要关闭模式，按下ESC并且什么都不会发生[1]。认为wtf，再次按下ESC键，模式关闭。只要确保文件选择输入在所有可能的情况下都得到了重点 - 通过输入制表符等。如果您使用第三方上传器，而我所说的不起作用 - 请查看该上传器如何将文件选择包装在一个自定义链接或按钮，以及在不同情况下实际接收点击事件的内容（例如，当您选中时，输入可能会收到事件，点击时可能是链接）。总的来说，可以很容易地处理我所描述的警告。

这对于扩展-s也同样适用（只需检查ESC选择是否不重点）

当您需要 blur（）时，您将无法检测到所有情况。文件选择输入。这不是一个跨浏览器的解决方案。即使FF需要调整才能工作。我一直在webkit上进行测试，结果令人满意，在其他浏览器中可能无法正常工作。

How can I go about detecting if the file input dialog is currently open?

I'm trying to integrate some file upload functionality into a popup (bootstrap style) model on a web app I'm building. As part of the model's behaviour, if escape is pressed, the model is closed.

This is all good till I open a file input dialog from the open model, if I hit escape to close the input dialog, it'll also close the model.

A super simplified version of what I'm trying to achieve http://jsfiddle.net/ckevy/1/

解决方案

Try solving it like this:

When a user clicks on the file selection input, give it focus: $(el).focus().

Then, anytime a user hits ESC, look if the $(':focus') element is the file selection input. In that case, blur() that input and do not close the modal. Worst case – the user wants to close the modal, presses ESC and nothing happens [1]. Thinks "wtf", presses ESC again and modal closes as it should. Just make sure that the file selection input does get focus in all possible cases – tabbing through inputs, etc. If you use a third party uploader and what I've said doesn't work – look into how that uploader wraps the file selection in a custom link or button, and what actually receives the click event in different cases (e.g. when you tab, the input might receive the event, when you click, it could be the link). Overall, it's manageable to have this working with the caveat I've described.

This works with expanded -s too similarly (just check that a select is not focused when ESC is hit).

You won't be able to detect all the cases when you need to blur() the file selection input. It's not a cross-browser solution. Even FF needs adjustments to work. I've been testing on webkit with positive results, in other browsers it might not work.

这篇关于检测文件输入对话框是否打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！