2016-10-12 82 views
1

目前我使用dropzone.js像這樣:dropzone.js輔助

<cfform name='UploadFiles' action="uploadfiles.cfm" class="dropzone"> 

我不能夠通過「標籤」和「輸入,這是一個輔助問題訪問此控制。我怎樣才能使這個鍵盤可訪問?

回答

0

dropzone不能從鍵盤上工作。您必須實現另一個鍵盤可訪問的控件(如本機input[type=file]

1

我通過在Dropzone消息中添加<button>元素來實現鍵盤輔助功能。 看到的片段:

Dropzone.autoDiscover = false; 
 

 
// Putting a <button> element in the dropzone message which can be targeted by the keyboard. 
 
// Note: Clicking the dropzone area or the button will trigger the file browser. 
 
var myDropzone = new Dropzone('#my-awesome-dropzone', { 
 
\t dictDefaultMessage: "Drop files here or <button type='button'>select</button> to upload." 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" rel="stylesheet"/> 
 

 

 
<label for="in1">Input 1</label> 
 
<input type="text" id="in1"> 
 
<br/> 
 
<label for="in1">Input 2</label> 
 
<input type="text" id="in2"> 
 

 
<form action="/file-upload" 
 
     class="dropzone" 
 
     id="my-awesome-dropzone"></form> 
 
     
 
<label for="in1">Input 4</label> 
 
<input type="text" id="in4"> 
 
<br/> 
 
<label for="in1">Input 5</label> 
 
<input type="text" id="in5">

通過設置配置選項爲:

dictDefaultMessage: "Drop files here or <button type='button'>select</button> to upload." 

你可以通過標籤和目標該按鈕,按下回車鍵和文件瀏覽器彈出。

我只是在試圖解決同樣的問題時偶然發現了這個問題,但它似乎能夠正常工作。有關Dropzone可配置選項的詳細信息,請訪問:http://www.dropzonejs.com/#configuration