javascript - examples - ¿El mejor método de navegador cruzado para capturar CTRL+S con JQuery?

jquery methods

Question

Mis usuarios desean poder presionar Ctrl + S para guardar un formulario. ¿Existe una buena forma de capturar la combinación de teclas Ctrl + S en todos los navegadores y enviar mi formulario?

La aplicación se basa en Drupal, por lo que jQuery está disponible.

Answer 1

@Eevee: A medida que el navegador se convierte en el hogar para una funcionalidad más rica y rica y comienza a reemplazar las aplicaciones de escritorio, simplemente no va a ser una opción para renunciar al uso de atajos de teclado. El rico e intuitivo conjunto de comandos de teclado de Gmail fue decisivo para mi disposición a abandonar Outlook. Los atajos de teclado en Todoist, Google Reader y Google Calendar hacen que mi vida sea mucho más fácil a diario.

Los desarrolladores definitivamente deben tener cuidado de no anular las pulsaciones de teclas que ya tienen un significado en el navegador. Por ejemplo, el cuadro de texto de WMD en el que estoy escribiendo inexplicablemente interpreta Ctrl + Del como "Blockquote" en lugar de "eliminar palabra reenviar". Tengo curiosidad por saber si existe una lista estándar de accesos directos "seguros para el navegador" que los desarrolladores de sitios pueden usar y de los que los navegadores se comprometerán a mantenerse alejados en futuras versiones.

Answer 2

A Alan Bellows respuesta:! (E.altKey) añadido para los usuarios que utilizan AltGr al escribir (por ejemplo, Polonia). Sin esta presión, AltGr + S dará el mismo 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; });

Answer 3

Combiné algunas opciones para admitir Firefox, IE y Chrome. También lo he actualizado para un mejor soporte 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;
     }
});

Answer 4

Esta fue mi solución, que es mucho más fácil de leer que otras sugerencias aquí, puede incluir fácilmente otras combinaciones de teclas y se ha probado en IE, Chrome y 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;
});

Answer 5

Esta solución jQuery funciona para mí en Chrome y Firefox, tanto para Ctrl + S como 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;
}); 

Answer 6

Este complemento hecho por mí puede ser útil.

Plugin

Puede usar este complemento para proporcionar los códigos clave y la función para que se ejecute como este

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

En el código que he mostrado cómo realizar para Ctrl + S. Obtendrá documentación detallada en el enlace. El complemento está en la sección JavaScript Code de mi Pen on Codepen.

Answer 7

Esto debería funcionar (adaptado de https://.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;
    }
}); 

Answer 8

Esto funcionó para mí en Chrome ... por algún motivo event.which devuelve una S mayúscula (83) para mí, no estoy seguro de por qué (independientemente del estado de bloqueo de mayúsculas), así que utilicé fromCharCode y toLowerCase solo para estar 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;
});

Si alguien sabe por qué obtengo 83 y no 115 , estaré encantado de escuchar, y si alguien prueba esto en otros navegadores, me alegraría saber si funciona o no.

Answer 9

Esto funciona para mí (usando jquery) para sobrecargar Ctrl + S , Ctrl + F y 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;
        }
    }
});

Answer 10

Me gusta este pequeño complemento . Sin embargo, necesita un poco más de facilidad de navegación cruzada.

Answer 11

Me gustaría que las aplicaciones web no anulen mis teclas de acceso directo predeterminadas, sinceramente. Ctrl + S ya hace algo en los navegadores. Tener ese cambio abruptamente dependiendo del sitio que estoy viendo es perturbador y frustrante, sin mencionar a menudo con errores. He tenido sitios que secuestran Ctrl + Tab porque parecía lo mismo que Ctrl + I , arruinando mi trabajo en el sitio y evitando que cambie de pestaña como de costumbre.

Si desea teclas de método abreviado, use el atributo accesskey . No rompa la funcionalidad del navegador existente.

Answer 12

Puede usar una biblioteca de accesos directos para manejar las cosas específicas del navegador.

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

Answer 13

Resolví mi problema en IE , usando una alert("With a message") para evitar el comportamiento predeterminado:

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

Answer 14

ejemplo:

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

uso

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

enlace para descargar: http://www.openjs.com/scripts/events/keyboard_shortcuts/#

Answer 15

$(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 es una versión actualizada de la respuesta de @ AlanBellows, which reemplaza con la key . También funciona incluso con el problema de clave de capital de Chrome (donde si presiona Ctrl + S envía mayúscula S en lugar de s). Funciona en todos los navegadores modernos.

Answer 16

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

Los códigos clave pueden diferir entre los navegadores, por lo que es posible que deba verificar más de 115.