截获的Javascript“ Ctrl + O”无法打开我的文件对话框

Question

I have an <input type="file" id="browse-button"/> file-browser input in my HTML.

I have another button with ID choose-file-button that, when clicked, calls document.getElementById("browse-button").click(); . When this button is clicked, it correctly clicks #browse-button and the file dialog opens.

Now, I took code from this answer to intercept a Ctrl+O keypress and open my file dialog, so I have this:

$(window).bind('keydown', function(e)
{
    if (e.ctrlKey || e.metaKey)
    {
        switch (String.fromCharCode(e.which).toLowerCase())
        {
            case 's':
                e.preventDefault();
                // doesn't matter for this question
                return false;
            case 'o':
                e.preventDefault();
                document.getElementById("choose-file-button").click();
                return false;
        }
    }
    return true;
});

As you can see, when I intercept Ctrl+O I click on my #choose-file-button button, which calls document.getElementById("browse-button"); in its onclick handler. I have put a breakpoint in this click handler, and when I press Ctrl+O it does arrive at this breakpoint. However, the file dialog never shows up.

Through debugging, I found out that if I put an alert(...); after the #choose-file-button click() line, then the alert shows up and the normal page "Open File" dialog shows up (not my file dialog). If I do not have this alert, however, nothing shows up at all.

Is this a bug? How can I fix it and make my file dialog show up via the intercepted Ctrl+O ?

Edit: I just tested in Chrome, and it works perfectly. However, it still does not work in Firefox.

Answer 1

There's some browser security magic going on here. When using timeouts or intervals or any other methods I try, the code carries on as normal but the browser simply refuses to open a file upload dialog. This is probably deliberate, to stop malicious JS from trying to grab users' files without consent. However, if you bind to a click event on a link, it works perfectly using jQuery or regular JS.

Edit: As suspected, most browsers keep track of whether an event is trusted or not based on the type of event and whether it was created by the user or generated programmatically. Se this answer for the full details. As you can see, since keyboard events aren't in the list, they can never be trusted.

Test JSFiddle

<form action="#" method="post">
    <div>
        <input type="file" id="myfile" name="myfile" /> <a href="#" id="mylink" accesskey="o">Click me</a>
    </div>
</form>

$("#mylink").click(function () {
    $("#myfile").click();
});

$(window).bind('keydown', function (e) {
    if (e.ctrlKey || e.metaKey) {
        switch (String.fromCharCode(e.which).toLowerCase()) {
            case 'o':
                e.preventDefault();
                console.log("1a");

                $("#myfile").click();
                //alert("hello");

                console.log("1b");
                return false;
        }
    }
    return true;
});

I think there are only two options here, and they're both workarounds, not solutions.

• One is to use a link to trigger the file upload dialog, and ask people to use ALT+SHIFT+O instead of CTRL+O (because I added an accesskey attribute to the link in the example).
• The other alternative is to use one of the new HTML5 JavaScript APIs for drag-drop file uploading .

Addendum: I also tried using pure JavaScript in Firefox to grab a click event and check to see if it's trusted using the isTrusted property. For the clicks on the link, it returned true . However, attempting to store and re-use the event elsewhere doesn't work, because it's already been dispatched by the time you get a reference to it. Also, unsurprisingly, creating a new event and attempting to set isTrusted = true doesn't work either since it's read-only.

Answer 2

Browser map many Ctrl+ shortcuts to own commands, for instance CTRL+O to open a file (in firefox).

On the same time browser behave different when you try to override such shortcuts in javascript. Some browsers allow you to do so, some don't, and sometimes the default browser action may pop up together with the action of your javascript.

Here is another thread discussing this topic .

Probably the best you can do is to choose a different shortcut.

Answer 3

You can try with Mousetrap library. It overrides the most problems that key capturing makes. Official website and complete refference:

https://craig.is/killing/mice

Good luck

Answer 4

You cannot do that in all browsers, as far as I am concern only IE allow it. I guess this is due to security issues, so that programmer are disabled to set the file name on the HTML File element automatically(without permission of client).

have a look on this link for more details:

In JavaScript can I make a "click" event fire programmatically for a file input element?

Show input file dialog on load?