스페이스 바를 통해 업로드 파일 레이블에 액세스 할 수있게하고

Question

을 입력하십시오.

각도 2를 사용하여 키보드 액세스 가능한 업로드 페이지를 만들려고합니다. 스페이스 바를 사용하여 "업로드 할 파일 선택"을 활성화하고 키를 입력하는 데 문제가 있습니다. 레이블을 클릭하여 파일을 업로드 할 수 있습니다.

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

입력 사항이 표시되지 않으며 사용자가 업로드 할 파일을 선택할 수 있도록 라벨을 사용하고 있습니다. onkeypress, keyup 및 keydown을 시도했지만 라벨에 키보드로 액세스 할 수 없게되었습니다.

Answer 1

나는 동일한 문제가있었습니다. 스페이스 또는 엔터 키를 누르면 레이블에 keypress 핸들러를 추가하여 클릭을 트리거합니다.

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 분명히.