Question

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

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

输入显示为none，我使用标签允许用户选择要上传的文件。我试过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做同样的事情。

通过空格键访问上传文件标签，然后输入

1 个答案: