Можно ли использовать клавиатуру для запуска браузера файлов в JavaScript?

Question

У меня есть код, который позволяет моим пользователям открывать браузер файлов браузера клиента, чтобы они могли выбрать файл.

Это нормально работает, когда пользователь нажимает кнопку с помощью мыши, но как-то полностью с ней не работает.

Так я установка кнопки следующим образом:

var that = this, 
    upload_button = jQuery(".upload-button"); 

upload_button.click(function(e) 
    { 
     e.preventDefault(); 
     e.stopPropagation(); 

     // simulate a click on the hidden file-input button 
     that.upload(editor_widget); 
    }); 

I Настройка интерфейса клавиатуры следующим образом (upload_button получит фокус первый, очевидно):

upload_button.keypress(function(e) 
    { 
     if(!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) 
     { 
      switch(e.which) 
      { 
      case 85: // [U]pload 
      case 13: // Enter 
       e.preventDefault(); 
       e.stopPropagation(); 

       // simulate a click on the hidden file-input Browse button 
       that.upload(editor_widget); 
       break; 

      } 
     } 
    }); 

Тогда функция загрузки выглядит следующим образом :

....prototype.upload = function(editor_widget) 
{ 
    var upload_button = jQuery(".upload-button"), 
     upload_input_file = w.find(".file-input input"); 

    // ignore clicks if the button does not exist 
    if(!upload_button.exists()) 
    { 
     return; 
    } 

    // simulate a click on the file "Browse" button 
    // 
    upload_input_file.focus(); 
    upload_input_file.click(); 
    c.focus(); 
}; 

Так, как-то upload_input_file.click(); отлично работает, когда я нажимаю окурок на. Он полностью терпит неудачу, когда я нажимаю U или <enter> ...

Я в первую очередь тестирую в Firefox на данный момент.

Answer 1

Вы можете полностью это сделать. Зарегистрируйте событие keyup для документа, а затем нажмите кнопку щелчка, чтобы открыть кнопку браузера.

$(document).keyup(function (e) { 
    if (e.keyCode === 85) { 
    $(".upload-button").click(); 
    } 
}); 

Answer 2

Попробуйте заменить использованием .click() на DOM элемент для JQuery .click() на объект JQuery

$(window).on("keydown", function(event) {  
 
    if (event.which === 13 || event.which === 85) { 
 
    event.preventDefault(); 
 
    event.stopImmediatePropagation(); 
 
    $("input")[0].click() 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<input type="file" />

Answer 3

Как уже упоминалось в комментариях двух других ответов, я нашел то, что сделает Enter (и в конечном итоге пробел) работают в Firefox, но не в U.

Идея состоит в том, чтобы сфокусироваться на вход файла типа в keydown и, таким образом, нормальное событие Enter или Space keyup делает то, что обычно делает.

upload_button.keydown(function(e) 
{ 
    if(!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) 
    { 
     switch(e.which) 
     { 
     case 85: // [U]pload -- does not work in Firefox 
     case 13: // Enter 
     case 32: // Space 
      // we cannot simulate a click in this case, but we can 
      // change the focus and let the system manage the keyup 
      // event as normal... be sure to let the normal propagation 
      // of the event happen since that's where things 
      // actually happens. So all we do is: 
      upload_input_file.focus(); 
      break; 

     } 
    } 
}); 

Я еще не проверял, я, возможно, придется управлять U ключ с click() так работает, как ожидалось в других браузерах.

---

Хорошо, теперь я также протестирована с IE, и он работает с U ключа с исходным кодом. Клавиши «Пробел» и «Ввод» не работают в IE, поэтому, если вы хотите поддерживать их, для чего потребуется тест, чтобы знать, следует ли обрабатывать эти ключи, как в IE, или как в Firefox ...