web-dev-qa-db-fra.com

raccourcis du navigateur de capture javascript (ctrl + t / n / w)

Est-il possible de capturer ces raccourcis?

  • Ctrl+N
  • Ctrl+T
  • Ctrl+W

J'ai essayé mais ça ne marche pas:

$(window).keydown(function(event) {
  console.log(event.keyCode);
  event.preventDefault();
});

Quand j'appuie T ça montre 84 dans la console, mais si j'appuie sur Ctrl+T il ne montre rien et ouvre un nouvel onglet.

Je voudrais capturer ces raccourcis et empêcher toute action du navigateur.

javascripteventsbrowserkeyboard-shortcuts
63
Gergely Fehérvári

Capture Ctrl événements clavier en Javascript

Exemple de code:

$(window).keydown(function(event) {
  if(event.ctrlKey && event.keyCode == 84) { 
    console.log("Hey! Ctrl+T event captured!");
    event.preventDefault(); 
  }
  if(event.ctrlKey && event.keyCode == 83) { 
    console.log("Hey! Ctrl+S event captured!");
    event.preventDefault(); 
  }
});

Firefox

(6.0.1 testé)

Dans Firefox, les deux écouteurs d'événements fonctionnent. Si vous appuyez sur CtrlT ou CtrlS combinaisons de clés, vous obtiendrez les deux messages sur la console, et le navigateur n'ouvrira pas d'onglet, ni ne demandera d'enregistrer.

Il est intéressant de noter que si vous utilisez alert au lieu de console.log La event.preventDefault() ne fonctionne pas, et ouvre un nouvel onglet ou demande une sauvegarde. Peut-être que ce bug doit être corrigé.

Chrome3

Dans Chrome 3, cela fonctionne comme dans Firefox.

Chrome4

(testé)

Dans Chrome4, certaines combinaisons de touches de contrôle ont été réservées à l'usage du navigateur uniquement et ne peuvent plus être interceptées par le JavaScript côté client dans la page Web.
Ces restrictions n'existaient pas dans Chrome3 et sont incompatibles avec Firefox3/3.5 et IE7/8 (sous Windows).

Dans Chrome 4, cela fonctionne de manière similaire à Firefox, à l'exception de certaines combinaisons de clavier:

  • CtrlN

  • CtrlShiftN

  • CtrlT

  • CtrlShiftT

  • CtrlW

  • CtrlShiftW

Ces combinaisons ne peuvent pas être capturées par Javascript, mais les plugins intégrés peuvent les capturer. Par exemple, si vous vous concentrez dans une vidéo Youtube et appuyez sur CtrlT, le navigateur n'ouvrira pas un nouvel onglet.

IE7/8

Cela fonctionne comme dans Firefox ou Chrome3.

IE9

(testé)

IE9 est à nouveau un mouton noir, car il ne permet pas à javascript de capturer Ctrl? événement clavier. J'ai testé avec de nombreuses combinaisons de claviers (R, T, P, S, N, T) et aucun n'a fonctionné. Les applications intégrées ne peuvent pas non plus capturer l'événement. Testé avec des vidéos Youtube.

Merci à @ Lime pour le grand lien .

98
Gergely Fehérvári

Depuis le 20 mars 2012, il y a eu un correctif Chrome qui permet aux applications Web de gérer Control + NWT dans Chrome dans l'événement keydown js (il fonctionne en javascript pur, ou toute bibliothèque comme jQuery).

Cette correction permet à javascript de gérer ces combinaisons de touches si Chrome est ouvert en mode Application, ce qui peut être fait de cette manière:

Le correctif est documenté ici:

10
JotaBe

Pour développer les autres réponses:

Le code pour bloquer certaines combinaisons dans Chrome/Chrome est défini ici , im summary, F11 pour quitter le mode plein écran et tout ce qui manipule et navigue dans les onglets ou les fenêtres est bloqué:

[Shift] Ctrl (Q | N | W | T | Tab ↹)

8
flying sheep

Au lieu de piéger le Ctrl+W raccourci clavier, détecter lorsque la fenêtre est fermée peut être une option valide:

"L'événement beforeunload est déclenché lorsque la fenêtre, le document et ses ressources sont sur le point d'être déchargés.

Lorsqu'une chaîne non vide est affectée à la propriété returnValue Event, une boîte de dialogue apparaît, demandant aux utilisateurs de confirmer la sortie de la page (voir l'exemple ci-dessous). Lorsqu'aucune valeur n'est fournie, l'événement est traité en mode silencieux. "

2
Robin Millette

La réponse est vraiment simple: ce n'est pas possible directement sans quelques astuces en javascript.

Cela dépend du navigateur. La plupart des navigateurs interceptent ces raccourcis et les utilisent pour leurs propres événements. (par exemple ouvrir de nouveaux onglets) Le raccourci n'atteint jamais le moteur javascript.

Ce qui est cependant possible facilement, pour attraper les raccourcis avec flash. Mais c'est loin d'un site Web convivial.

Mise à jour:

Voici un petit exemple. Généralement, tous les navigateurs afficheront l'alerte lorsque Ctrl+y est pressé. (y = 89)

document.onkeydown = keyDownEvent;
document.onkeyup = keyUpEvent;

var isCtrl = false;

function keyDownEvent() {
    var keyid = event.keyCode;

    if(keyid == 17) {
        isCtrl = true;
    }
}

function keyUpEvent() {
    var keyid = event.keyCode;

    if(keyid == 17) {
        isCtrl = false;
    }

    if(keyid == 89 && isCtrl == true) {
        alert('CTRL-Y pressed');   
    }
}

Si vous remplacez le 84 par 89, ce qui représente un t, rien ne va arriver. Vous pouvez l'essayer sur jsfiddle.net .

1
Robin