Melhor método entre navegadores para capturar CTRL + S com JQuery?

Meus usuários gostariam de pressionar Ctrl+ Spara salvar um formulário. Existe uma boa maneira entre navegadores de capturar a combinação de teclas Ctrl+ Se enviar meu formulário?

O aplicativo é construído no Drupal, então o jQuery está disponível.

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

Os códigos de chave podem diferir entre os navegadores; portanto, talvez seja necessário verificar mais do que apenas 115.

Isso funciona para mim (usando jquery) para sobrecarregar Ctrl+ S, Ctrl+ Fe 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;
        }
    }
});

Você pode usar uma biblioteca de atalhos para lidar com as coisas específicas do navegador.

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

Esta solução jQuery funciona para mim no Chrome e Firefox, tanto para Ctrl+ Scomo para 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;
}); 

Este funcionou para mim no Chrome ... por algum motivo, event.whichretorna um S maiúsculo (83) para mim, não sei por que (independentemente do estado do caps lock), então eu usei fromCharCodee toLowerCaseapenas para estar do lado seguro

$(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;
});

Se alguém souber por que eu recebo 83 e não 115 , ficarei feliz em ouvir, também se alguém testar isso em outros navegadores, ficarei feliz em saber se funciona ou não

Combinei algumas opções para oferecer suporte ao FireFox, IE e Chrome. Também atualizei-o para melhor suporte ao 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;
     }
});

Gostaria que os aplicativos da Web não substituíssem minhas teclas de atalho padrão, honestamente. Ctrl+ Sjá faz algo nos navegadores. Ter essa alteração abruptamente, dependendo do site que estou visualizando, é perturbador e frustrante, sem mencionar muitas vezes erros. Eu tive sites seqüestrados Ctrl+ Tabporque parecia o mesmo que Ctrl+ I, arruinando meu trabalho no site e me impedindo de alternar entre as guias como de costume.

Se você deseja teclas de atalho, use o accesskeyatributo Por favor, não quebre a funcionalidade existente do navegador.

@ Eevee: À medida que o navegador se torna o lar de funcionalidades cada vez mais ricas e começa a substituir os aplicativos de desktop, não será apenas uma opção para renunciar ao uso de atalhos de teclado. O conjunto rico e intuitivo de comandos do teclado do Gmail foi fundamental na minha disposição de abandonar o Outlook. Os atalhos de teclado do Todoist, Google Reader e Google Calendar tornam minha vida muito, muito mais fácil diariamente.

Definitivamente, os desenvolvedores devem tomar cuidado para não substituir as teclas digitadas que já possuem um significado no navegador. Por exemplo, a caixa de texto WMD que estou digitando inexplicavelmente interpreta Ctrl+ Delcomo "Blockquote" em vez de "excluir a palavra adiante". Estou curioso para saber se há uma lista padrão em algum lugar de atalhos "seguros para o navegador" que os desenvolvedores de sites podem usar e que os navegadores se comprometam a ficar longe de versões futuras.

$(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.

Esta é uma versão atualizada da resposta de @ AlanBellows, substituindo whichpor key. Ele também funciona mesmo com a falha da tecla de capital do Chrome (onde, se você pressionar Ctrl+, Sele envia capital S em vez de s). Funciona em todos os navegadores modernos.

Esta foi a minha solução, que é muito mais fácil de ler do que outras sugestões aqui, pode incluir facilmente outras combinações de teclas e foi testada no IE, Chrome e 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;
});

Eu gosto deste pequeno plugin . No entanto, ele precisa de um pouco mais de compatibilidade entre navegadores.

Isso deve funcionar (adaptado 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;
    }
}); 

exemplo:

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

uso

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

link para download: http://www.openjs.com/scripts/events/keyboard_shortcuts/#

Para Alan Bellows, responda:! (E.altKey) adicionado para usuários que usam AltGrao digitar (por exemplo, Polônia). Sem isso, pressionar AltGr+ Sdará o mesmo resultado 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; });

Este plugin criado por mim pode ser útil.

Plugar

Você pode usar este plugin. Você precisa fornecer os códigos-chave e a função a ser executada dessa maneira

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

No código, eu mostrei como executar o Ctrl+ S. Você receberá a documentação detalhada no link. O plug-in está na seção Código JavaScript da minha caneta no Codepen.

Resolvi meu problema no IE , usando um alert("With a message")para impedir o comportamento padrão:

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;
        }
    }
});