Showing the browser’s ‘select file’ dialog when focusing input[type=file] through keyboard navigation
-
20-09-2019 - |
Question
As the title says, I want the ‘select file’ dialog to open when a certain input
gets focus by tabbing through the form fields (using keyboard navigation). By default, the ‘select file’ window only opens when the field is clicked.
I put up a page on JS Bin for this issue: http://jsbin.com/areba/edit
Currently, this page consists of the following code:
<!doctype html>
<html>
<head>
<title>Sandbox</title>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="text">
<input type="file">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {
$('input[type=text]').focus(function() {
$(this).next('input[type=file]').css('background', 'lime').trigger('click');
});
});
</script>
</body>
</html>
As you can see, there is a text input and a file input. The idea is that when the text input receives focus, the file input gets ‘clicked’ or whatever and the ‘select file’ window opens.
The .css('background', 'lime')
statement seems to work fine; however, invoking .trigger('click')
on the file input seems to do nothing at all.
(I realize this might cause an accessibility problem, so please, let’s not discuss that. Thanks.)
Solution
This will work in IE and Safari (I think), but not in Opera or Firefox, as they haven't implemented the click() event for file upload elements - edit: yet.
OTHER TIPS
I doubt you would be able to do activate the dialog for security reasons. A real click event has to happen, depending on the browser.
I know Flash/Flex have this requirement.