Es wird der ‚Datei auswählen‘ Dialog des Browsers, wenn die Eingabe Fokussierung [type = file] durch Tastaturnavigation

StackOverflow https://stackoverflow.com/questions/1734478

Frage

Wie der Titel schon sagt, mag ich die ‚Datei auswählen‘ Dialog zu öffnen, wenn ein bestimmte input Fokus erhält, indem sie durch die Formularfelder Tabbing (Tastaturnavigation verwenden). Standardmäßig öffnet sich das ‚Datei auswählen‘ Fenster nur, wenn das Feld geklickt wird.

ich eine Seite auf JS Bin für dieses Problem setzen: http://jsbin.com/areba/edit

Derzeit Diese Seite besteht aus dem folgenden 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>

Wie Sie sehen können, gibt es eine Texteingabe und eine Datei-Eingabe. Die Idee ist, dass, wenn der Texteingabefokus erhält, die Dateieingabe wird ‚geklickt‘ oder was auch immer und die ‚Datei auswählen‘ Fenster öffnet sich.

Die .css('background', 'lime') Aussage scheint zu funktionieren; jedoch auf der Datei-Eingabe .trigger('click') Aufruf scheint überhaupt nichts zu tun.

(Ich weiß, dies könnte ein Zugänglichkeit Problem verursachen, so wenden Sie sich bitte, lassen Sie sie nicht diskutieren. Danke.)

War es hilfreich?

Lösung

Dies wird in IE und Safari arbeitet (glaube ich), aber nicht in Opera oder Firefox, da sie den Klick nicht umgesetzt haben () Ereignis für Datei-Upload-Elemente - edit:. Noch

Andere Tipps

Ich bezweifle, dass Sie der Lage wäre, den Dialog aus Sicherheitsgründen zu tun activate. Ein echter Klick-Ereignis muss passieren, je nach Browser.

ich weiß, Flash / Flex diese Anforderung hat.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top