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.)
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.