Beste browserübergreifende Methode zum Erfassen von STRG + S mit JQuery?

162

Meine Benutzer möchten in der Lage sein, Ctrl+ Szu drücken, um ein Formular zu speichern. Gibt es eine gute browserübergreifende Möglichkeit, die Ctrl+ STastenkombination zu erfassen und mein Formular zu senden?

Die App basiert auf Drupal, sodass jQuery verfügbar ist.

ceejayoz
quelle

Antworten:

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

Die Schlüsselcodes können zwischen den Browsern unterschiedlich sein, daher müssen Sie möglicherweise nach mehr als nur 115 suchen.

Jim
quelle
5
In OS X-Webkit-Browsern gibt cmd + s 19 zurück, daher lohnt es sich auch, dies zu überprüfen. dh wenn (! (event.which == 115 && event.ctrlKey) &&! (event.which == 19)) true zurückgeben;
Tadas T
6
Funktioniert nur in Firefox für mich. IE9 & Chrome registrieren keinen Tastendruck.
Pelms
7
Selbst mit $ (document) .keypress (anstelle von $ (window) .keypress) greifen IE und Chrome das Tastendruckereignis immer noch mit 'Ctrl' vor dem Skript ab.
Pelms
16
Verwenden Sie keydownanstelle von keypressin Chrom
destan
3
Leider ist es veraltet
Cannicide
250

Dies funktioniert bei mir (mit jquery), um Ctrl+ S, Ctrl+ Fund Ctrl+ zu überladen 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;
        }
    }
});
Danny Ruijters
quelle
8
Dies ist die einzige Antwort, die für mich in allen von mir getesteten Browsern funktioniert hat, einschließlich Chrome Version 28.0.1500.71
T. Brian Jones
27
Machbar mit reinem JS, wenn Sie window.addEventListener(anstelle von$(window).bind(
2
@NatesS Wenn Sie die Warnung entfernen, wird der Speicherdialog nicht geöffnet. Es wird durch Alarm verursacht. Funktioniert gut für mich in allen Browsern. Schöne Problemumgehung.
CrazyNooB
2
Hat für mich gearbeitet. Bitte akzeptieren Sie diese Antwort als die oben genannte.
pavanw3b
1
@Fireflight: a else iffunktioniert nicht, da die ursprüngliche ifAnweisung bereits als wahr ausgewertet wird. Sie müssen Ihren Code vor die ursprüngliche ifAnweisung setzen und das Original in eine verwandeln else if.
Danny Ruijters
28

Diese jQuery-Lösung funktioniert für mich in Chrome und Firefox sowohl für Ctrl+ Sals auch für 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;
}); 
Alan Bellows
quelle
1
Dies ist die einzige Lösung, die hier ordnungsgemäß funktioniert. Vielen Dank!
Stephan Weinhold
1
Dies könnte jetzt veraltet sein: Verwenden Sie e.keyanstelle von e.which;
Cannicide
Aktualisiert am 14. Mai 2017 für moderne Standards.
Alan Bellows
28

Dieser hat für mich auf Chrome funktioniert ... aus irgendeinem Grund event.whichgibt er ein Großbuchstaben S (83) für mich zurück, nicht sicher warum (unabhängig vom Status der Feststelltaste), also habe ich verwendet fromCharCodeund toLowerCasenur um auf der sicheren Seite zu sein

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

Wenn jemand weiß, warum ich 83 und nicht 115 bekomme , werde ich mich freuen zu hören, auch wenn jemand dies in anderen Browsern testet, werde ich mich freuen zu hören, ob es funktioniert oder nicht

Eran Medan
quelle
Ich habe das gleiche Problem mit Chrom. So ein Schmerz!
Qodeninja
ps jetzt, wo ich es mir ansehe, denke ich, dass der PreventDefault redundant ist, da return false ihn auslöst (und stopPropagation), aber nicht sicher, ob es für die Frage wichtig ist
Eran Medan
7

Ich habe einige Optionen kombiniert, um FireFox, IE und Chrome zu unterstützen. Ich habe es auch aktualisiert, um Mac besser zu unterstützen

// 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;
     }
});
uadrive
quelle
5

Ich möchte, dass Webanwendungen ehrlich gesagt meine Standard-Tastenkombinationen nicht überschreiben. Ctrl+ macht Sschon etwas in Browsern. Diese Änderung abrupt abhängig von der Site, die ich gerade ansehe, ist störend und frustrierend, ganz zu schweigen von den oft fehlerhaften. Ich habe Websites entführt, Ctrl+ Tabweil sie genauso aussahen wie Ctrl+ I, was sowohl meine Arbeit auf der Website ruinierte als auch mich daran hinderte, die Tabs wie gewohnt zu wechseln.

Wenn Sie Tastenkombinationen möchten, verwenden Sie das accesskeyAttribut. Bitte brechen Sie nicht die vorhandenen Browserfunktionen.

Eevee
quelle
2
Ich stimme vollkommen zu, aber leider bin ich der Peon, der implementiert, nicht der Entscheidungsträger.
Ceejayoz
24
Stimmt, aber STRG + S ist keine häufig verwendete Funktion. Ich bezweifle, dass die Leute es vermissen würden, besonders wenn es bedeutet, dass Sie Ihre Datei in Ihrer Webanwendung speichern können.
EndangeredMassa
13
Ich bin damit einverstanden normalerweise mit Ihnen, aber das einzige Mal , dass ich jemals ctrl-s in einem Browser ist verwenden , wenn ich vergessen , dass ich ein Webapp bin mit und erwarten , dass die Verknüpfung etwas Nützliches zu tun. Ich bin normalerweise enttäuscht. Google Mail speichert Ihre E-Mails, wenn Sie Strg-S drücken, obwohl Sie es nie bemerken würden, denn wenn es genau das tut, was Sie erwarten und was jede Desktop-App tut, bemerken Sie es nicht wirklich. Sie bemerken, wenn Sie glauben, Google Mail als HTML speichern zu wollen, und es ist ärgerlich.
Carson Myers
4
Das hängt wirklich von der Anwendung ab. Ich erstelle eine Terminal-Emulator-Web-App und das Überschreiben von Strg + C scheint praktisch, wenn nicht notwendig.
Brack
Die Notwendigkeit, eine HTML-Seite tatsächlich zu speichern, ist ziemlich gering. Ich mache das nie. Wie andere bereits gesagt haben, wird der Browser schnell zu dem Ort, an dem wir arbeiten, all unsere Arbeit, und immer mehr Browser ersetzen Textverarbeitungsprogramme und andere Apps, die traditionell auf dem Desktop verwendet werden. Benutzer sind an ihre Tastatur gewöhnt Verknüpfungen, daher ist ihre Unterstützung ein Muss für Benutzerfreundlichkeit und Akzeptanz. Wenn Sie ein Textverarbeitungsprogramm erstellen und mich dazu bringen, ALT + UMSCHALT + S oder etwas Schlimmeres zu drücken, werde ich Ihre App als schlechte Angewohnheit als Benutzer löschen.
DavidScherer
4

@Eevee: Da der Browser die Heimat für immer umfangreichere Funktionen wird und Desktop-Apps ersetzt, ist es einfach keine Option, auf die Verwendung von Tastaturkürzeln zu verzichten. Die umfangreichen und intuitiven Tastaturbefehle von Google Mail trugen maßgeblich zu meiner Bereitschaft bei, Outlook aufzugeben. Die Tastaturkürzel in Todoist, Google Reader und Google Kalender erleichtern mir das tägliche Leben erheblich.

Entwickler sollten auf jeden Fall darauf achten, Tastenanschläge, die bereits eine Bedeutung im Browser haben, nicht zu überschreiben. Zum Beispiel interpretiert das WMD-Textfeld, in das ich unerklärlicherweise tippe, Ctrl+ Delals "Blockquote" anstatt als "Wort vorwärts löschen". Ich bin gespannt, ob es irgendwo eine Standardliste mit "browser-sicheren" Verknüpfungen gibt, die Website-Entwickler verwenden können und von denen sich Browser verpflichten, sich in zukünftigen Versionen fernzuhalten.

Kräuter Caudill
quelle
1
Die Antwort lautet Nein, es gibt keine sichere Liste von browser-sicheren Verknüpfungen. Und es ist gut für zwei Gründe: 1. Verknüpfungen sind anpassbar (zumindest in Opera). 2. Auf diese Weise schränken Sie die Kreativität der Browser-Anbieter nicht ein, um mehr Leistung für die Browser-Nutzung selbst zu erhalten.
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.

Dies ist eine aktuelle Version der Antwort von @ AlanBellows, die whichdurch ersetzt wird key. Es funktioniert auch mit Chrome's Großbuchstabenfehler (wenn Sie Ctrl+ drücken S, wird Großbuchstaben S anstelle von s gesendet). Funktioniert in allen modernen Browsern.

Cannizid
quelle
Um dies zu testen, klicken Sie in das Snippet-Feld und drücken Sie Strg + S.
Cannicide
1

Dies war meine Lösung, die viel einfacher zu lesen ist als andere Vorschläge hier, leicht andere Tastenkombinationen enthalten kann und auf IE, Chrome und Firefox getestet wurde:

$(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;
});
R. Salisbury
quelle
1
+1 für die Verwendung von String.fromCharCode. Macs haben jedoch keinen Steuerschlüssel. Testen Sie die Befehlstaste mit evt.metaKey. Es kehrt truefür Cmd unter Mac und Win unter Windows zurück.
KatoFett
0

Dies sollte funktionieren (angepasst von 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;
    }
}); 
Pelme
quelle
0

Zu Alan Bellows Antwort :! (E.altKey) hinzugefügt für Benutzer, die AltGrbeim Tippen verwenden (z. B. Polen). Ohne dieses Drücken von AltGr+ erhalten Sie Sdas gleiche Ergebnis wie 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; });
Jaś Fasola
quelle
0

Dieses von mir erstellte Plugin kann hilfreich sein.

Plugin

Mit diesem Plugin müssen Sie die Schlüsselcodes und Funktionen angeben, um so ausgeführt zu werden

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

Im Code habe ich gezeigt, wie man für Ctrl+ arbeitet S. Sie erhalten eine detaillierte Dokumentation über den Link. Das Plugin befindet sich im JavaScript-Code-Bereich meines Stifts auf Codepen.

10011101111
quelle
0

Ich habe mein Problem im IE gelöst , indem ich ein verwendet habe alert("With a message"), um das Standardverhalten zu verhindern:

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