Meilleure méthode multi-navigateurs pour capturer CTRL + S avec JQuery?

Mes utilisateurs aimeraient pouvoir appuyer sur Ctrl+ Spour enregistrer un formulaire. Existe-t-il un bon moyen pour plusieurs navigateurs de capturer la combinaison de touches Ctrl+ Set d'envoyer mon formulaire?

L'application est basée sur Drupal, donc jQuery est disponible.

$(window).keypress(function(event) {
    if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
    alert("Ctrl-S pressed");
    event.preventDefault();
    return false;
});

Les codes clés peuvent différer d'un navigateur à l'autre, vous devrez donc peut-être en rechercher plus de 115.

Cela fonctionne pour moi (en utilisant jquery) pour surcharger Ctrl+ S, Ctrl+ Fet Ctrl+ G:

$(window).bind('keydown', function(event) {
    if (event.ctrlKey || event.metaKey) {
        switch (String.fromCharCode(event.which).toLowerCase()) {
        case 's':
            event.preventDefault();
            alert('ctrl-s');
            break;
        case 'f':
            event.preventDefault();
            alert('ctrl-f');
            break;
        case 'g':
            event.preventDefault();
            alert('ctrl-g');
            break;
        }
    }
});

Vous pouvez utiliser une bibliothèque de raccourcis pour gérer les éléments spécifiques au navigateur.

shortcut.add("Ctrl+S",function() {
    alert("Hi there!");
});

Cette solution jQuery fonctionne pour moi dans Chrome et Firefox, à la fois pour Ctrl+ Set Cmd+ S.

$(document).keydown(function(e) {

    var key = undefined;
    var possible = [ e.key, e.keyIdentifier, e.keyCode, e.which ];

    while (key === undefined && possible.length > 0)
    {
        key = possible.pop();
    }

    if (key && (key == '115' || key == '83' ) && (e.ctrlKey || e.metaKey) && !(e.altKey))
    {
        e.preventDefault();
        alert("Ctrl-s pressed");
        return false;
    }
    return true;
}); 

Celui-ci a fonctionné pour moi sur Chrome ... pour une raison quelconque, event.whichrenvoie un S majuscule (83) pour moi, je ne sais pas pourquoi (quel que soit l'état du verrouillage des majuscules), alors j'ai utilisé fromCharCodeet toLowerCasejuste pour être du bon côté

$(document).keydown(function(event) {

    //19 for Mac Command+S
    if (!( String.fromCharCode(event.which).toLowerCase() == 's' && event.ctrlKey) && !(event.which == 19)) return true;

    alert("Ctrl-s pressed");

    event.preventDefault();
    return false;
});

Si quelqu'un sait pourquoi j'obtiens 83 et non 115 , je serai heureux d'entendre, même si quelqu'un teste cela sur d'autres navigateurs, je serai heureux de savoir si cela fonctionne ou non

J'ai combiné quelques options pour prendre en charge FireFox, IE et Chrome. Je l'ai également mis à jour pour mieux supporter mac

// simply disables save event for chrome
$(window).keypress(function (event) {
    if (!(event.which == 115 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) && !(event.which == 19)) return true;
    event.preventDefault();
    return false;
});

// used to process the cmd+s and ctrl+s events
$(document).keydown(function (event) {
     if (event.which == 83 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) {
        event.preventDefault();
        save(event);
        return false;
     }
});

J'aimerais que les applications Web ne remplacent pas mes touches de raccourci par défaut, honnêtement. Ctrl+ fait Sdéjà quelque chose dans les navigateurs. Avoir ce changement brusquement en fonction du site que je consulte est perturbant et frustrant, sans parler de souvent bogué. J'ai eu des sites détournés Ctrl+ Tabparce qu'il ressemblait à Ctrl+ I, à la fois ruinant mon travail sur le site et m'empêchant de changer d'onglet comme d'habitude.

Si vous voulez des touches de raccourci, utilisez l' accesskeyattribut. Veuillez ne pas interrompre les fonctionnalités existantes du navigateur.

@Eevee: Alors que le navigateur devient le foyer de fonctionnalités plus riches et plus riches et commence à remplacer les applications de bureau, ce ne sera tout simplement pas une option pour renoncer à l'utilisation des raccourcis clavier. L'ensemble riche et intuitif de commandes clavier de Gmail a contribué à ma volonté d'abandonner Outlook. Les raccourcis clavier de Todoist, Google Reader et Google Agenda me facilitent beaucoup la vie au quotidien.

Les développeurs doivent absolument veiller à ne pas remplacer les frappes qui ont déjà une signification dans le navigateur. Par exemple, la zone de texte WMD dans laquelle je tape interprète inexplicablement Ctrl+ Delcomme "Blockquote" plutôt que "delete word forward". Je suis curieux de savoir s'il existe quelque part une liste standard de raccourcis «sûrs pour le navigateur» que les développeurs de sites peuvent utiliser et que les navigateurs s'engageront à éviter dans les versions futures.

$(document).keydown(function(e) {
    if ((e.key == 's' || e.key == 'S' ) && (e.ctrlKey || e.metaKey))
    {
        e.preventDefault();
        alert("Ctrl-s pressed");
        return false;
    }
    return true;
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try pressing ctrl+s somewhere.

Ceci est une version à jour de la réponse de @ AlanBellows, remplacée whichpar key. Cela fonctionne également même avec le pépin de touche majuscule de Chrome (où si vous appuyez sur Ctrl+, Sil envoie un S majuscule au lieu de s). Fonctionne dans tous les navigateurs modernes.

C'était ma solution, qui est beaucoup plus facile à lire que d'autres suggestions ici, peut facilement inclure d'autres combinaisons de touches et a été testée sur IE, Chrome et Firefox:

$(window).keydown(function(evt) {
    var key = String.fromCharCode(evt.keyCode);
    //ctrl+s
    if (key.toLowerCase() === "s" && evt.ctrlKey) {
        fnToRun();
        evt.preventDefault(true);
        return false;
    }
    return true;
});

J'aime ce petit plugin . Il faut cependant un peu plus de convivialité entre les navigateurs.

Cela devrait fonctionner (adapté de https://stackoverflow.com/a/8285722/388902 ).

var ctrl_down = false;
var ctrl_key = 17;
var s_key = 83;

$(document).keydown(function(e) {
    if (e.keyCode == ctrl_key) ctrl_down = true;
}).keyup(function(e) {
    if (e.keyCode == ctrl_key) ctrl_down = false;
});

$(document).keydown(function(e) {
    if (ctrl_down && (e.keyCode == s_key)) {
        alert('Ctrl-s pressed');
        // Your code
        return false;
    }
}); 

exemple:

shortcut.add("Ctrl+c",function() {
    alert('Ok...');
}
,{
    'type':'keydown',
    'propagate':false,
    'target':document
});

usage

<script type="text/javascript" src="js/shortcut.js"></script>

lien pour téléchargement: http://www.openjs.com/scripts/events/keyboard_shortcuts/#

À Alan Bellows réponse:! (E.altKey) ajouté pour les utilisateurs qui utilisent AltGrlors de la frappe (par exemple, la Pologne). Sans cette pression, AltGr+ Sdonnera le même résultat que Ctrl+S

$(document).keydown(function(e) {
if ((e.which == '115' || e.which == '83' ) && (e.ctrlKey || e.metaKey) && !(e.altKey))
{
    e.preventDefault();
    alert("Ctrl-s pressed");
    return false;
}
return true; });

Ce plugin créé par moi peut être utile.

Brancher

Vous pouvez utiliser ce plugin, vous devez fournir les codes clés et la fonction à exécuter comme ceci

simulatorControl([17,83], function(){
 console.log('You have pressed Ctrl+Z');
});

Dans le code, j'ai montré comment effectuer pour Ctrl+ S. Vous obtiendrez une documentation détaillée sur le lien. Le plugin est dans la section Code JavaScript de mon stylo sur Codepen.

J'ai résolu mon problème sur IE , en utilisant un alert("With a message")pour empêcher le comportement par défaut:

window.addEventListener("keydown", function (e) {
    if(e.ctrlKey || e.metaKey){
        e.preventDefault(); //Good browsers
        if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { //hack for ie
            alert("Please, use the print button located on the top bar");
            return;
        }
    }
});