Blueimp fileupload открывает сборщик файлов при нажатии на пробел.

Question

Работая над ранее существующим проектом, я обнаружил, что вход в файл загружается при пробеле после нажатия элемента ввода, проходящего через несколько тегов над ним и заканчивая на моей странице только тогда, когда он попадает в пару <li>, которая содержат элементы формы. (Если есть один или несколько элементов списка, проблема остается в нижней части страницы.)

У меня есть пара JSFiddles с минимальными примерами, которые я мог бы построить. Я полностью озадачен тем, что здесь происходит.

Пример с одним элементом списка, поведение продолжается в нижней части окна: https://jsfiddle.net/e980gzry/

Пример с двумя пунктами списка, поведение останавливается над первым элементом списка: https://jsfiddle.net/o76qd639/5/

Кто-нибудь запустить в эту ситуацию и раньше, и как я мог обратиться к нему?

Answer 1

Если вы не возражаете против использования JavaScript для запуска файлового браузера, вы можете сделать что-то вроде этого с помощью JQuery:

$(function() { 
    // whenever .fileinput-button is clicked, trigger a click on the input element 
    $(".fileinput-button").on('click', function (e) { 
    $("#fileupload").click(); 
    }); 
}); 

Но если вы используете это непосредственно вам нужно будет переместить input вне .fileinput-button а также:

<div class='box-content'> 
    <span class='fileinput-button' style='color: #008fd2; border-bottom: 1px solid #e0e2e5'> 
     <i class='fa fa-upload'> 
     <span> 
      <i class="fa fa-fa-upload"></i> Add files... 
     </span> 
     </i> 
    </span> 
    <input id='fileupload' multiple='' name='files[]' type='file'> 
</div> 

и упростить CSS, удаление .fileinput-button input определение:

.fileinput-button { 
    display: block; 
    cursor: pointer; 
} 

#fileupload { 
    display: none; 
} 

See complete jsfiddle, протестирован в хроме и firefox.

Кстати, проблема, которую вы видите, заключается в том, что браузеру не нравится давать полный контроль над элементами ввода. Так что это всего лишь обходной путь для этого.