Is it possible to use the keyboard to trigger a File Browser in JavaScript?

问题

I have code that let my users open the File Browser of the client's browser so they can select a file.

That works fine when the user clicks a button with the mouse, but somehow it completely fails with the keyboard.

So I setup the button as follow:

var that = this,
    upload_button = jQuery(".upload-button");

upload_button.click(function(e)
    {
        e.preventDefault();
        e.stopPropagation();

        // simulate a click on the hidden file-input button
        that.upload(editor_widget);
    });

I setup the keyboard as follow (the upload_button will get focus first, obviously):

upload_button.keypress(function(e)
    {
        if(!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey)
        {
            switch(e.which)
            {
            case 85:   // [U]pload
            case 13:   // Enter
                e.preventDefault();
                e.stopPropagation();

                // simulate a click on the hidden file-input Browse button
                that.upload(editor_widget);
                break;

            }
        }
    });

Then the upload function looks like this:

....prototype.upload = function(editor_widget)
{
    var upload_button = jQuery(".upload-button"),
        upload_input_file = w.find(".file-input input");

    // ignore clicks if the button does not exist
    if(!upload_button.exists())
    {
        return;
    }

    // simulate a click on the file "Browse" button
    //
    upload_input_file.focus();
    upload_input_file.click();
    c.focus();
};

So, somehow the upload_input_file.click(); works fine when I click the button. It completely fails when I press U or <enter>...

I'm primarily testing in Firefox at the moment.

回答1:

You can totally do this. Register keyup event for document then trigger click to file browser button.

$(document).keyup(function (e) {
  if (e.keyCode === 85) {
     $(".upload-button").click(); 
  }
});

回答2:

Try substituting using .click() on DOM element for jQuery .click() on jQuery object

$(window).on("keydown", function(event) {      
  if (event.which === 13 || event.which === 85) {
    event.preventDefault();
    event.stopImmediatePropagation();
    $("input")[0].click()
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="file" />

回答3:

As mentioned in the comments of the other two answers, I found something that will make the Enter (and eventually spacebar) work in Firefox, but not the U key.

The idea is to change the focus to the input of type file in keydown and thus let the normal Enter or Space keyup event do what it normally does.

upload_button.keydown(function(e)
{
    if(!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey)
    {
        switch(e.which)
        {
        case 85:   // [U]pload -- does not work in Firefox
        case 13:   // Enter
        case 32:   // Space
            // we cannot simulate a click in this case, but we can
            // change the focus and let the system manage the keyup
            // event as normal... be sure to let the normal propagation
            // of the event happen since that's where things
            // actually happens. So all we do is:
            upload_input_file.focus();
            break;

        }
    }
});

I have not tested yet, I may have to manage the U key with the click() so it works as expected in other browsers.

Okay, I now also tested with IE and it works with the U key with the original code. The Space and Enter keys do not both work in IE so if you want to support both, that will require a test to know whether to handle those keys as in IE or as in Firefox...

来源：https://stackoverflow.com/questions/36075023/is-it-possible-to-use-the-keyboard-to-trigger-a-file-browser-in-javascript

标签

javascript

jquery

firefox

keyboard-shortcuts