views:

441

answers:

2

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"&gt;&lt;/script&gt;
  <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.)

+1  A: 

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.

Daniel A. White
+2  A: 

This will work in IE and Safari (I think), but not in Opera or Firefox, as they havent implemented the click() event for file upload elements - edit: yet.

Gordon