使空格键可以访问上传文件标签并输入

Question

我正在尝试使用 Angular 2 创建一个可通过键盘访问的上传页面。我无法使用空格键启用“选择要上传的文件”并输入键。我可以通过单击标签上传文件。

<label for="files" > Choose a file to upload </label>
<input type="file" id="files" (click)="upload($event)"/>

输入显示为无，我使用标签允许用户选择要上传的文件。我尝试了 onkeypress、keyup 和 keydown，但我无法使其键盘可用于标签。

Answer 1

我遇到了同样的问题；我刚刚在标签中添加了一个按键处理程序，以在按下空格键或回车键时触发点击它。

Here's a working Plunkr.

HTML（别忘了tabindex="0"）：

<label class="btn" for="files" tabindex="0" (keypress)="onUploadLabelClick($event)">Choose a file to upload</label>
<input class="hiddenFileUpload" type="file" id="files" (click)="upload($event)"/>

相关功能：

onUploadLabelClick(evt): void {
    var keyCode = evt.which || evt.keyCode;
    if (keyCode === 13 || keyCode === 32) {
        $(evt.target).click();
        evt.preventDefault();
    }
}

我这里使用的是 JQuery，但显然对于纯 JS 也很简单。