7
votes

JavaScript intercepté "Ctrl + O" n'ouvre pas ma boîte de dialogue de fichier

J'ai un entrée du navigateur de fichier dans mon HTML.

J'ai un autre bouton avec ID choisir -BoutonFile que, lorsqu'il est cliqué sur, appelle document.getelementbyID ("Bouton de navigation"). Cliquez sur (); . Lorsque ce bouton est cliqué, il clique correctement sur # Bouton de navigation et la boîte de dialogue Fichier s'ouvre.

maintenant, j'ai pris le code de Cette réponse Pour intercepter un Ctrl + O KeyPress et Ouvrir ma boîte de dialogue de fichier, donc j'ai ceci: xxx

Comme vous pouvez le constater, lorsque j'intercepter ctrl + o i clic sur mon bouton # choisir-bouton-fichier bouton, qui appelle document.getElementyID ("Bouton de navigation"); dans son onclick gestionnaire. J'ai mis un point d'arrêt dans ce gestionnaire de clic, et lorsque j'appuie sur Ctrl + O , il arrive à ce point d'arrêt. Cependant, la boîte de dialogue de fichiers ne montre jamais.

via le débogage, j'ai découvert que si je mettez une alerte (...); après le fichier # choisir -Button Cliquez () LIGNE, puis l'alerte apparaît et La boîte de dialogue "Ouvrir le fichier Open" apparaît (pas ma boîte de dialogue Fichier). Si je n'ai pas cette alerte, cependant, rien ne se présente du tout.

est-ce un bug? Comment puis-je le réparer et faire apparaître ma boîte de dialogue de fichier via l'intercepté Ctrl + O ?

Edit: Je viens de tester en chrome, et ça marche parfaitement. Cependant, il ne fonctionne toujours pas dans Firefox.


7 commentaires

Avez-vous essayé d'utiliser JQuery pour déclencher votre clic avec $ ("# choisir-bouton-fichier"). Cliquez sur () au lieu d'utiliser GetElementyID?


@Osuwariboy j'ai maintenant, mais ça ne change rien.


Votre problème semble être similaire à celui-ci: Nursature Ctrl + S . Peut-être que vous pourriez essayer certaines de leurs suggestions?


@Osuwariboy sûr, mais je ne veux pas d'alerte du tout, même retardé.


Vos capuchons sont-ils verrouillés? <--- c'est une blague :)


Il pourrait y avoir des informations utiles sur ce Donc Répondre à un post similaire


Avez-vous une fonction réelle pour votre gestionnaire de clic? Avez-vous essayé de définir un point d'arrêt pour vérifier s'il est appelé du tout? Si ce n'est pas appelé, avez-vous essayé d'appeler une fonction factice qui n'est pas un gestionnaire d'événements? Si votre fonction factice est appelée avec succès, vous pouvez simplement déplacer votre traitement là-bas pour voir si cela fonctionne réellement.


4 Réponses :


9
votes

Il y a une magie de sécurité du navigateur ici. Lors de l'utilisation des délais d'attente ou d'intervalles ou d'autres méthodes que j'essaye, le code porte la normale, mais le navigateur refuse simplement d'ouvrir une boîte de dialogue de téléchargement de fichier. Ceci est probablement délibéré, pour empêcher JS malveillant d'essayer de saisir les fichiers d'utilisateurs sans consentement. Toutefois, si vous vous trouvez à un événement de clic sur un lien, il fonctionne parfaitement à l'aide de JQuery ou de JS régulier.

Edit: Comme suspecté, la plupart des navigateurs gardent la trace de la confiance ou non sur le type d'événement et non sur le type d'événement et si Il a été créé par l'utilisateur ou généré par programme. SE Cette réponse pour plus de détails. Comme vous pouvez le constater, car les événements de clavier ne sont pas dans la liste, ils ne peuvent jamais être de confiance. P>

TEST JSFIDDLE P>

<form action="#" method="post">
    <div>
        <input type="file" id="myfile" name="myfile" /> <a href="#" id="mylink" accesskey="o">Click me</a>
    </div>
</form>

$("#mylink").click(function () {
    $("#myfile").click();
});

$(window).bind('keydown', function (e) {
    if (e.ctrlKey || e.metaKey) {
        switch (String.fromCharCode(e.which).toLowerCase()) {
            case 'o':
                e.preventDefault();
                console.log("1a");

                $("#myfile").click();
                //alert("hello");

                console.log("1b");
                return false;
        }
    }
    return true;
});
  • One est d'utiliser un lien pour déclencher la boîte de dialogue de téléchargement de fichier et demander aux gens d'utiliser Alt + Shift + o au lieu de Ctrl + O (car j'ai ajouté un Accesskey code> Attribut au lien dans l'exemple). LI>
  • L'autre alternative consiste à utiliser l'une des nouvelles API HTML5 JavaScript pour Téléchargement de fichier de dépose glisser-déposer . Li> ul>

    Addendum: J'ai également essayé d'utiliser Pure JavaScript dans Firefox pour saisir un événement de clic et vérifiez s'il est fait confiance à l'aide de la propriété Istrusted CODE>. Pour les clics sur le lien, il a renvoyé vrai code>. Cependant, tenter de stocker et de réutiliser l'événement ailleurs ne fonctionne pas, car il a déjà été envoyé au moment où vous en avez une référence. Également, sans surprise, créant un nouvel événement et tentative de définir istrusted = true code> ne fonctionne pas non plus que comme il est en lecture seule. P> P>


2 commentaires

@ Guest271314 Nice lien! J'ai eu une très forte soupçon que le navigateur pouvait dire la différence entre des clics authentiques et des programmes programmatiques.


@BoffinBrain Merci pour votre réponse détaillée, et désolé je n'étais pas là pour poser des questions / donner des réponses / upvote plus tôt ... j'étais hors de la ville. Quoi qu'il en soit, je peux vérifier que l'API HTML5, mais si elle semble trop difficile à utiliser, je vais simplement vous coller sans raccourcis clavier pour le fichier IO (car il y a toujours des boutons sur la page Web qui fonctionne parfaitement bien).



4
votes

Carte du navigateur Beaucoup de raccourcis Ctrl + à de propres commandes, par exemple Ctrl + O pour ouvrir un fichier (en Firefox).

Dans le même temps, le navigateur est différent lorsque vous essayez de remplacer de tels raccourcis dans JavaScript. Certains navigateurs vous permettent de le faire, d'autres non, et parfois, l'action du navigateur par défaut peut apparaître avec l'action de votre JavaScript.

Voici un autre fil discutant de ce Topic .

Probablement le meilleur que vous puissiez faire est de choisir un raccourci différent.


0 commentaires

4
votes

Vous pouvez essayer avec la bibliothèque de Mousetrap. Il remplace le plus de problèmes que la capture de capture clé fait. Site officiel et reformerence complète:

https://craig.is/killing/mice

bonne chance


3 commentaires

Juste pour clarifier ici, l'OP souhaitait remplacer la combinaison de clés Ctrl + O, non configurant un événement de clic, qui est trivial à mettre en œuvre.


La bibliothèque de Mousetrap n'est pas de définir un événement de clic, est pour l'opposant, est d'éviter l'utilisation de la souris, tout avec le clavier.


Aha je vois. Un bel utilité, mais en raison des problèmes mentionnés dans ma réponse, aucune bibliothèque JS ne peut contourner les précautions de sécurité du navigateur. J'ai essayé avec un violon ici .



1
votes

Vous ne pouvez pas faire cela dans tous les navigateurs, dans la mesure où je ne suis inquiétant que c'est-à-dire le permettre. Je suppose que cela est dû aux problèmes de sécurité, de sorte que le programmeur est désactivé pour définir automatiquement le nom du fichier sur l'élément de fichier HTML (sans la permission du client).

regarder sur ce lien pour plus de détails:

JavaScript puis-je créer un événement "Cliquez sur" Event Firematiquement pour un élément d'entrée de fichier?

Afficher la boîte de dialogue du fichier d'entrée sur la charge?


0 commentaires