スペースバーでアップロードファイルのラベルにアクセスできるようにして入力してください

Question

角度2を使用してキーボードアクセス可能なアップロードページを作成しようとしています。スペースバーと入力キーを使用して「アップロードするファイルを選択」を有効にできません。私はラベルをクリックしてファイルをアップロードすることができます。

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

入力の表示がなく、私はラベルを使用してアップロードするファイルを選択できるようにしています。私はonkeypress、keyup、keydownを試しましたが、ラベルにキーボードでアクセスできるようにすることはできません。

Answer 1

同じ問題がありました。スペースキーまたはEnterキーが押された場合、ラベルにクリック操作を追加するためのキー入力ハンドラを追加しました。

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明らかに。