是否可以使用键盘来触发JavaScript中的文件浏览器？ [英] Is it possible to use the keyboard to trigger a File Browser in JavaScript?

问题描述

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

当用户点击按钮鼠标，但不知何故，它完全失败，键盘。

所以我设置按钮如下：

  var that = this，
 upload_button = jQuery（。upload-button）; 
 
 upload_button.click（函数（e）
 {
 e.preventDefault（）; 
 e.stopPropagation（）; 
 
 / /模拟一个点击隐藏的文件输入按钮
 that.upload（editor_widget）; 
}）; 
  

我按照以下步骤设置键盘（显然，upload_button会首先获得焦点）：

$ b $ pre $ upload_button.keypress（函数（e）
{
if（！e.shiftKey&& ctrlKey&！e.altKey&！e.metaKey）
{
switch（e.which）
{
case 85：// [U] pload
case 13：//输入
e.preventDefault（）;
e.stopPropagation（）;

//模拟点击隐藏文件输入浏览按钮
that.upload（editor_widget）;
break;

}
}
}）;


然后上传函数如下所示：

< pre $ .... prototype.upload = function（editor_widget）
{
var upload_button = jQuery（。upload-button），
upload_input_file = w.find（。file-input input）;

//如果按钮不存在则忽略点击
if（！upload_button.exists（））
{
return;


//模拟点击文件浏览按钮
//
upload_input_file.focus（）;
upload_input_file.click（）;
c.focus（）;
};


所以， upload_input_file.click（）; 单击按钮时正常工作。当我按下 U 或<进入> ...

$时， b $ b

我目前主要是在Firefox中进行测试。 你完全可以做到这一点。
注册键盘事件的文档，然后触发点击文件浏览器按钮。

  $（document）.keyup（function e）{
 if（e.keyCode === 85）{
 $（。upload-button）。click（）; 
} 
}）; 
  

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.

解决方案

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

这篇关于是否可以使用键盘来触发JavaScript中的文件浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！