How to recognize that a file-input has opened a window

Question

I have a function that runs when the user presses the esc button:

$(document).on('keyup', function (e) {
    if (e.keyCode == 27) {
        foo();
    }
});

I have a form with a file field.

<input type="file" />

When you click it, it opens a file-manager dialog, which can be closed with the esc as well. In that case, I want to avoid running the foo function. Is there a way to recognize it with javascript?

Does it have to be run on `keyup`? Would `keydown` or `keypress` work for you, I suspect (but don't know without testing) that neither of those would fire in the situation you describe — James Thorpe, Nov 11 '14 at 09:52
What if the dialog was closed by clicking the X in the corner? — Rory McCrossan, Nov 11 '14 at 09:52
@Rory I don't think that's the issue - the issue is that when dialog is closed using escape, the page then captures the key being released after the dialog has closed, when it shouldn't. I don't think `keydown` or `keypress` would capture the event in that situation — James Thorpe, Nov 11 '14 at 09:53
@JamesThorpe I'm not sure. But I'm interested - why would `keypress` be any different? — yuvi, Nov 11 '14 at 09:54
@yuvi because the key going down part of it would have happened on the dialog, not the page - same as if you've got the focus on another window, press escape down, switch to your page and then release it — James Thorpe, Nov 11 '14 at 09:54
@JamesThorpe yeah I saw the comment like a second after asking. I'll try that — yuvi, Nov 11 '14 at 09:54
@JamesThorpe I don't mean to say that's an issue, but if the OP want to run code when the dialog is closed, what is special about closing by pressing ESC, as opposed to the more common close window button? — Rory McCrossan, Nov 11 '14 at 09:55
@JamesThorpe Ok, fair point. However, I'm saying you can't detect when someone closes the dialog by clicking the close button. — Rory McCrossan, Nov 11 '14 at 09:56
@RoryMcCrossan there's already an close button too. I need the `esc` behavior as well as part of a request, so it's not debatable — yuvi, Nov 11 '14 at 09:57
@Rory Indeed - but that's completely unrelated to this issue? — James Thorpe, Nov 11 '14 at 09:57
@JamesThorpe I must be missing something here. I'll leave you to it :) — Rory McCrossan, Nov 11 '14 at 09:59
@JamesThorpe using `keypress` I saw no difference - but using `keydown` did something weird - it triggered the `foo()` function but *left the file-dialog open!*. So, uh, I need the opposite of that I guess =] — yuvi, Nov 11 '14 at 10:04
nice... it's almost tempting to say it's a browser bug - have you tried it in alternative browsers to see if there's a difference in behaviour? — James Thorpe, Nov 11 '14 at 10:04
@JamesThorpe you're right! it's only for chrome. Firefox triggers both `foo()` and closes the dialog. I'm running Ubuntu and I'm too lazy to run a VM to check IE, but I'm assuming it'll be like FF — yuvi, Nov 11 '14 at 10:07
I think given what we've seen/heard, it's going to be tricky to implement a fully working cross browser solution... all I can say at this point I'm afraid is Good Luck! — James Thorpe, Nov 11 '14 at 10:09
Well grab a solution from here that's suitable to your needs http://stackoverflow.com/questions/4628544/how-to-detect-when-cancel-is-clicked-on-file-input , then just add a flag condition around your function. — Scott Alexander, Nov 11 '14 at 10:35

vernonner3voltazim · Answer 1 · 2014-11-11T13:48:58.227

Here is some code that can do what you want (a complete test-page):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>test-page</title>
 <script type="text/javascript">
//<!--
var ignr=false;

function func(e)
{ if(!ignr)
  { //add any key-specific tests here
    foo();
  }
  ignr = false;
  return;
}

function foo()
{
  return;
}

function func2(e)
{ //Could add a condition to do/not-do the next line, depending on the key...
  ignr = true;
  return;
}
// -->
 </script>
</head>
<body onkeyup="func(event);">
<input type="file" onkeyup="func2(event);" />
</body>
</html>

The trick is to assign a different function to the input tag. This won't prevent the other function from being called, but the herein-specified func2() is called first, giving you the chance to set a flag-variable that can control what gets done in the "main" onkeyup function. Note while I didn't specify any tests for the Escape key, you can certainly add them, and even completely control which keys you want to allow "through" func2() to call foo() inside the main onkeyup function. At the moment, no keys pressed during the file-input will have any chance of calling foo().

How to recognize that a file-input has opened a window

1 Answers1