Adds keyboard focus to file selector

This commit is contained in:
marktaiwan 2015-03-20 08:53:57 +08:00 committed by czaks
parent 4da073b6e8
commit 6e84a25f9a
2 changed files with 10 additions and 2 deletions

View File

@ -135,13 +135,21 @@ var dropHandlers = {
$(document).on(dropHandlers, '.dropzone'); $(document).on(dropHandlers, '.dropzone');
$(document).on('click', '.dropzone .remove-btn', function (e) { $(document).on('click', '.dropzone .remove-btn', function (e) {
e.stopPropagation();
var file = $(e.target).parent().data('file-ref'); var file = $(e.target).parent().data('file-ref');
getThumbElement(file).remove(); getThumbElement(file).remove();
removeFile(file); removeFile(file);
}); });
$(document).on('click', '.dropzone .file-hint', function (e) { $(document).on('keypress click', '.dropzone, .dropzone .file-hint', function (e) {
e.stopPropagation();
// accept mosue click or Enter
if (e.which != 1 || e.which != 13)
return;
var $fileSelector = $('<input type="file" multiple>'); var $fileSelector = $('<input type="file" multiple>');
$fileSelector.on('change', function (e) { $fileSelector.on('change', function (e) {

View File

@ -100,7 +100,7 @@
<input type="file" name="file" id="upload_file"> <input type="file" name="file" id="upload_file">
<div class="dropzone-wrap" style="display: none;"> <div class="dropzone-wrap" style="display: none;">
<div class="dropzone"> <div class="dropzone" tabindex="0">
<div class="file-hint">Select/drop/paste files here</div> <div class="file-hint">Select/drop/paste files here</div>
<div class="file-thumbs"></div> <div class="file-thumbs"></div>
</div> </div>