Il miglior metodo cross-browser per acquisire CTRL + S con JQuery?


162

I miei utenti vorrebbero poter premere Ctrl+ Sper salvare un modulo. Esiste un buon metodo cross-browser per acquisire la combinazione di tasti Ctrl+ Se inviare il mio modulo?

L'app è basata su Drupal, quindi jQuery è disponibile.

Risposte:


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

I codici chiave possono differire tra i browser, quindi potrebbe essere necessario controllare oltre 115.


5
su browser webkit OS X cmd + s restituisce 19, quindi vale anche la pena verificarlo. cioè se (! (event.which == 115 && event.ctrlKey) &&! (event.which == 19)) restituisce true;
— Tadas T

6
Funziona solo con Firefox per me. IE9 e Chrome non registrano alcun tasto.
— pelms

7
Anche con $ (documento) .keypress (invece di $ (finestra) .keypress), IE e Chrome prendono ancora l'evento keypress con 'Ctrl' prima dello script.
— pelms

16
usa keydowninvece di keypressin chrome
— destan

3
Purtroppo non è aggiornato
— Cannicide,

250

Questo funziona per me (usando jquery) per sovraccaricare 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;
        }
    }
});

8
Questa è l'unica risposta che ha funzionato per me in tutti i browser che ho testato, inclusa la versione di Chrome 28.0.1500.71
— T. Brian Jones,

27
Utilizzabile con JS puro se si utilizza window.addEventListener(invece$(window).bind(

2
@NatesS se si rimuove l'avviso, non si apre la finestra di dialogo di salvataggio. È causato a causa di un avviso. Funziona bene per me in tutti i browser. Bella soluzione alternativa.
— CrazyNooB,

2
Ha funzionato per me. Si prega di accettare questa risposta rispetto a quella sopra.
— pavanw3b,

1
@Fireflight: an else ifnon funzionerà perché l' ifistruzione originale sarà già valutata come vera. Dovrai inserire il codice prima ifdell'istruzione originale , trasformando l'originale in un else if.
— Danny Ruijters l'


29

Questa soluzione jQuery funziona per me in Chrome e Firefox, sia per Ctrl+ Sche per 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;
}); 

1
Questa è l'unica soluzione che funziona correttamente qui. Molte grazie!
— Stephan Weinhold il

1
questo potrebbe non essere più aggiornato ora: usa e.keyinvece di e.which;
— Cannicida,

Aggiornato il 14 maggio 2017 per gli standard moderni.
— Alan Bellows,

28

Questo ha funzionato per me su Chrome ... per qualche motivo event.whichrestituisce una S maiuscola (83) per me, non so perché (indipendentemente dallo stato di blocco maiuscole), quindi ho usato fromCharCodee toLowerCasesolo per essere al sicuro

$(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 qualcuno sa perché ottengo 83 e non 115 , sarò felice di sentire, anche se qualcuno lo prova su altri browser, sarò felice di sapere se funziona o no


Ho lo stesso problema con Chrome. Che dolore!
— qodeninja,

ps ora che lo guardo, penso che il preventDefault sia ridondante poiché return false lo innesca (e stopPropagation) ma non sono sicuro che contenga molto per la domanda
— Eran Medan,

7

Ho combinato alcune opzioni per supportare FireFox, IE e Chrome. L'ho anche aggiornato per supportare meglio 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;
     }
});

5

Vorrei che le applicazioni Web non sovrascrivessero i miei tasti di scelta rapida predefiniti, onestamente. Ctrl+ Sfa già qualcosa nei browser. Avere quel cambiamento bruscamente a seconda del sito che sto visualizzando è dirompente e frustrante, per non parlare spesso di bug. Ho avuto siti che dirottano Ctrl+ Tabperché sembrava uguale a Ctrl+I , entrambi rovinando il mio lavoro sul sito e impedendomi di cambiare scheda come al solito.

Se si desidera utilizzare i tasti di scelta rapida, utilizzare l' accesskeyattributo. Si prega di non interrompere la funzionalità del browser esistente.


2
Sono completamente d'accordo, ma sfortunatamente sono l'implementazione peon, non il decisore.
— Ceejayoz,

24
Vero, ma CTRL + S non è una funzionalità usata spesso. Dubito che alla gente mancherebbe, specialmente se ciò significa che puoi salvare il tuo file nella tua webapp.
— EndangeredMassa,

13
Normalmente sono d'accordo con te, ma l'unica volta che uso mai ctrl-s in un browser è quando dimentico che sto usando una webapp e mi aspetto che il collegamento faccia qualcosa di utile. Sono normalmente deluso. Gmail salva la tua email quando premi ctrl-s, anche se non te ne accorgerai mai perché quando fa esattamente quello che ti aspetti e cosa fa ogni app desktop, non te ne accorgi davvero. Noti quando pensa di voler salvare Gmail come HTML ed è fastidioso.
— Carson Myers,

4
Questo dipende davvero dall'applicazione. Sto creando un'app Web di emulazione di terminale e l'override di ctrl + c sembra pratico se non necessario.
— Brack

La necessità di salvare effettivamente una pagina HTML è piuttosto ridotta, mi ritrovo a farlo mai. Tuttavia, come altri hanno già detto, il browser sta rapidamente diventando il luogo in cui lavoriamo, tutto il nostro lavoro e sempre più browser stanno sostituendo i word processor e altre app tradizionalmente utilizzate sul desktop, gli utenti sono abituati alla tastiera scorciatoie, quindi supportarle è indispensabile per l'usabilità e l'adozione. Se crei un elaboratore di testi e mi fai colpire ALT + MAIUSC + S o qualcosa di peggio, scaricherò la tua app come una cattiva abitudine come utente.
— DavidScherer,

4

@Eevee: poiché il browser diventa la casa per funzionalità sempre più ricche e inizia a sostituire le app desktop, non sarà un'opzione per rinunciare all'uso delle scorciatoie da tastiera. Il ricco e intuitivo set di comandi da tastiera di Gmail è stato determinante per la mia volontà di abbandonare Outlook. Le scorciatoie da tastiera di Todoist, Google Reader e Google Calendar rendono la mia vita molto, molto più semplice su base giornaliera.

Gli sviluppatori dovrebbero assolutamente fare attenzione a non sovrascrivere i tasti che hanno già un significato nel browser. Ad esempio, la casella di testo WMD che sto scrivendo interpreta inspiegabilmente Ctrl+ Delcome "Blockquote" anziché "elimina parola in avanti". Sono curioso di sapere se esiste un elenco standard da qualche parte di scorciatoie "sicure per i browser" che gli sviluppatori del sito possono usare e che i browser si impegneranno a evitare nelle versioni future.


1
La risposta è No, non esiste un elenco sicuro di collegamenti sicuri per il browser. Ed è buono per due resaon: 1. I collegamenti sono personalizzabili (almeno in Opera). 2. In questo modo, non limitare la creatività del fornitore del browser per darti più potenza per l'utilizzo del browser stesso.
— gizmo,

3

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

Questa è una versione aggiornata della risposta di @ AlanBellows, che sostituisce whichcon key. Funziona anche con il glitch della chiave maiuscola di Chrome (dove se si preme Ctrl+ Sinvia S maiuscole anziché s). Funziona con tutti i browser moderni.


Per verificarlo, fai clic all'interno della casella dello snippet e premi Ctrl + S.
— Cannicida del

1

Questa era la mia soluzione, che è molto più facile da leggere rispetto ad altri suggerimenti qui, può facilmente includere altre combinazioni di tasti ed è stata testata su 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;
});

1
+1 per l'uso di String.fromCharCode. Tuttavia, i Mac non hanno un tasto di controllo. Test per il tasto comando con evt.metaKey. Ritorna trueper Cmd su Mac e Win su Windows.
— KatoFett,


0

Dovrebbe funzionare (adattato da 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;
    }
}); 


0

Alla risposta di Alan Bellows:! (E.altKey) aggiunto per gli utenti che usano AltGrdurante la digitazione (ad es. Polonia). Senza questa pressaturaAltGr + si Sotterrà lo stesso risultato di 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; });

0

Questo plugin creato da me può essere utile.

Collegare

Puoi usare questo plugin devi fornire i codici chiave e la funzione per essere eseguito in questo modo

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

Nel codice ho mostrato come eseguire per Ctrl+ S. Otterrai la documentazione dettagliata sul link. Il plug-in è nella sezione Codice JavaScript della mia penna su Codepen.


0

Ho risolto il mio problema su IE , utilizzando un alert("With a message")per impedire il comportamento predefinito:

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;
        }
    }
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.