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.