使用 Enter 鍵打開選擇文件對話框

Question

我的項目有問題

我想在“Enter”鍵上打開輸入文件以提高一些可訪問性。

我在標簽上添加了 tabindex ，因為當我使用 tab 跳轉到這個標簽並按“輸入”時，我想觸發將打開輸入文件選擇器的函數。

 .input { position: absolute; visibility: hidden; }

 <input id="input" class="input" name="newFile" type="file" accept=".pdf" data-required="true" /> <label class="btn" for="input" tabindex="0"> <span class="upload label"> <span class="label__text" data-label="Upload file" data-next-label="Upload next file">Upload file</span> </span> </label>

Answer 1

警告以下只是關於如何通過設置實際輸入樣式並在視覺上隱藏標簽（以確保它仍然可訪問）來實現這一點的快速想法。

但是，您仍然需要考慮許多可訪問性問題，例如顯示選擇了哪個文件。

但這確實向您展示了如何設置輸入樣式以保留所有本機功能，而無需自己重新實現它（例如，我在此處設置樣式的活動狀態）。 另外不要忘記自定義焦點指示器input:focus::before 。

還有其他問題，例如瀏覽器支持也需要考慮，但是理論上這應該可以合理地回退，我只是沒有測試過它。

此代碼筆為如何實現某些缺少的功能（例如顯示所選文件名）提供了一個很好的起點。

 input{ color: transparent; width:150px; height:28px } input::-webkit-file-upload-button { visibility: hidden; } input::before { content: 'Select a PDF'; color: black; display: inline-block; border: 1px solid #999; border-radius: 3px; padding: 5px 8px; outline: none; white-space: nowrap; -webkit-user-select: none; cursor: pointer; text-shadow: 1px 1px #fff; font-weight: 700; font-size: 10pt; width:132px; } input:hover::before { border-color: black; } input:active { outline: 0; } label { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; /* added line */ }

 <input id="input" class="input" name="newFile" type="file" accept=".pdf" data-required="true"/> <label for="input">upload file</label>