使上傳文件標籤可以通過空格鍵訪問，並輸入

我正在嘗試使用角度2創建鍵盤可訪問的上載頁面。我無法使用空格鍵啓用「選擇要上傳的文件」並輸入密鑰。我可以通過點擊標籤來上傳文件。使上傳文件標籤可以通過空格鍵訪問，並輸入

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

輸入的顯示是沒有和我使用的標籤，讓用戶選擇要上傳的文件。我嘗試了onkeypress，keyup和keydown，但我無法使它可以通過鍵盤訪問標籤。

來源

2017-03-07 Matt-pow

似乎在https://plnkr.co/edit/UKuSKU5hg9bhakEHR32Y?p=preview with tab and space中正常工作。 –

編號因爲我使用display：none來隱藏默認選擇文件。我只想讓用戶看到選擇一個文件上傳標籤。 –

如果您忽略了問題的重要部分，您如何期待有用的答案。請提供允許重現您的問題並解釋預期行爲的代碼。 –

我有同樣的問題;我只是給標籤添加了一個按鍵處理程序，如果按下空格鍵或回車鍵，就會觸發點擊按鍵。

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顯然。

來源

2017-03-15 22:02:18

使上傳文件標籤可以通過空格鍵訪問，並輸入

回答

相關問題