Question

我的代码可让我的用户打开客户端浏览器的文件浏览器，以便他们选择文件。

当用户使用鼠标单击按钮时，该工作正常，但不知何故，键盘完全失败。

所以我设置按钮如下：

group climb:
    if there's no one in the group
        stop
    otherwise
        step up

step up:
    if first in group is at top
        remove them from the group then group climb
    otherwise
        step up first in group then group climb

我将键盘设置如下（显然，upload_button将首先获得焦点）：

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);
    });

然后上传功能如下：

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;

            }
        }
    });

因此，当我点击按钮时，....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(); };以某种方式工作正常。按upload_input_file.click();或U ...

时完全失败

我目前主要在Firefox上测试。

Answer 1

你可以完全做到这一点。注册文档的keyup事件，然后触发click to file browser按钮。

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

Answer 2

尝试在DOM元素上使用.click()替换jQuery对象上的jQuery .click()

$(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" />

Answer 3

正如其他两个答案的评论中所提到的，我发现了一些能让Enter（最终是空格键）在Firefox中运行的东西，而不是U密钥。

我们的想法是将焦点更改为keydown中类型文件的输入，从而让正常的Enter或Space键盘事件按照正常情况执行。

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;

        }
    }
});

我还没有测试过，我可能需要使用U管理click()密钥，以便在其他浏览器中按预期工作。

好的，我现在也使用IE进行测试，它使用原始代码的U密钥。 Space和Enter键在IE中都不起作用，所以如果你想同时支持这两个键，那么需要测试才能知道是否像在IE或Firefox中那样处理这些键...

是否可以使用键盘在JavaScript中触发文件浏览器？

3 个答案: