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

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

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

这是一个正在工作的 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 做同样的事情很简单。