Najlepsza metoda przechwytywania CTRL + S za pomocą JQuery w różnych przeglądarkach?

162

Moi użytkownicy chcieliby móc nacisnąć Ctrl+, Saby zapisać formularz. Czy istnieje dobry sposób na przechwycenie kombinacji klawiszy Ctrl+ Si przesłanie formularza w różnych przeglądarkach?

Aplikacja jest oparta na Drupalu, więc dostępna jest jQuery.

ceejayoz
źródło

Odpowiedzi:

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

Kody kluczy mogą się różnić w różnych przeglądarkach, więc może być konieczne sprawdzenie więcej niż tylko 115.

Jim
źródło
5
w przeglądarkach webkit OS X cmd + s zwraca 19, więc też warto to sprawdzić. tzn. jeśli (! (event.which == 115 && event.ctrlKey) &&! (event.which == 19)) return true;
Tadas T
6
U mnie działa tylko w Firefoksie. IE9 i Chrome nie rejestrują żadnego naciśnięcia klawisza.
pelmy
7
Nawet z $ (document) .keypress (zamiast $ (window) .keypress), IE i Chrome nadal pobierają zdarzenie keypress z 'Ctrl', zanim zrobi to skrypt.
pelmy
16
użyj keydownzamiast keypressw chrome
destan
3
Niestety jest nieaktualny
Cannicide
250

To działa dla mnie (używając jquery) do przeciążenia Ctrl+ S, Ctrl+ Fi 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;
        }
    }
});
Danny Ruijters
źródło
8
To jedyna odpowiedź, która działała dla mnie we wszystkich testowanych przeglądarkach, w tym Chrome w wersji 28.0.1500.71
T. Brian Jones
27
Można to zrobić z czystym JS, jeśli używasz window.addEventListener(zamiast$(window).bind(
2
@NatesS jeśli usuniesz alert, nie otworzy się okno zapisywania. Jest to spowodowane czujnością. U mnie działa dobrze we wszystkich przeglądarkach. Niezłe obejście.
CrazyNooB
2
Pracował dla mnie. Proszę, zaakceptuj tę odpowiedź niż powyższą.
pavanw3b
1
@Fireflight: an else ifnie zadziała, ponieważ oryginalna ifinstrukcja będzie już oceniona jako prawdziwa. Będziesz musiał umieścić swój kod przed oryginalnym ifoświadczeniem, zamieniając oryginał w plik else if.
Danny Ruijters,
29

To rozwiązanie jQuery działa dla mnie w Chrome i Firefox, zarówno dla Ctrl+, jak Si 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
źródło
1
To jedyne rozwiązanie, które tutaj działa poprawnie. Wielkie dzięki!
Stephan Weinhold
1
to może być teraz nieaktualne: użyj e.keyzamiast e.which;
Cannicide
Zaktualizowano 14 maja 2017 r. Pod kątem nowoczesnych standardów.
Alan Bellows
28

Ten działał dla mnie na Chrome ... z jakiegoś powodu event.whichzwraca mi duże S (83), nie wiem dlaczego (niezależnie od stanu Caps Lock), więc użyłem fromCharCodei toLowerCasepo prostu po bezpiecznej stronie

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

Jeśli ktoś wie, dlaczego dostaję 83 a nie 115 to z przyjemnością usłyszę, również jeśli ktoś testuje to na innych przeglądarkach to chętnie usłyszę czy to działa czy nie

Eran Medan
źródło
Mam ten sam problem z chromem. Taki ból!
qodeninja
ps teraz, gdy na to patrzę, myślę, że PreventDefault jest zbędny, ponieważ return false go wyzwala (I stopPropagation), ale nie jestem pewien, czy ma to duże znaczenie dla pytania
Eran Medan
7

Połączyłem kilka opcji, aby obsługiwać FireFox, IE i Chrome. Zaktualizowałem go również, aby lepiej obsługiwał 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;
     }
});
uadrive
źródło
5

Naprawdę chciałbym, aby aplikacje internetowe nie zastępowały moich domyślnych klawiszy skrótu. Ctrl+ Sjuż coś robi w przeglądarkach. Nagła zmiana w zależności od witryny, którą przeglądam, jest uciążliwa i frustrująca, nie wspominając o często błędach. Miałem przechwytywanie witryn Ctrl+, Tabponieważ wyglądało to tak samo jak Ctrl+ I, co zrujnowało moją pracę na stronie i uniemożliwiło mi normalne przełączanie kart.

Jeśli chcesz klawisze skrótów, użyj accesskeyatrybutu. Nie przerywaj istniejącej funkcjonalności przeglądarki.

Eevee
źródło
2
Zgadzam się całkowicie, ale niestety jestem peonem wdrażającym, a nie decydentem.
ceejayoz
24
To prawda, ale CTRL + S nie jest często używaną funkcją. Wątpię, by ludzie to przegapili, zwłaszcza jeśli oznacza to, że możesz zapisać plik w swojej aplikacji internetowej.
EndangeredMassa
13
Zwykle się z tobą zgadzam, ale jedyny raz, kiedy używam ctrl-s w przeglądarce, to kiedy zapominam, że używam aplikacji internetowej i oczekuję, że skrót zrobi coś pożytecznego. Zwykle jestem rozczarowany. Gmail zapisuje wiadomości e-mail po naciśnięciu ctrl-s, chociaż nigdy tego nie zauważysz, ponieważ kiedy robi to, czego oczekujesz i co robi każda aplikacja komputerowa, tak naprawdę nie zauważasz. Zauważasz, kiedy myśli, że chcesz zapisać Gmaila jako HTML, i jest to denerwujące.
Carson Myers,
4
To naprawdę zależy od aplikacji. Buduję aplikację internetową emulatora terminala i zastąpienie ctrl + c wydaje się praktyczne, jeśli nie jest konieczne.
Brack
Potrzeba faktycznego zapisania strony HTML jest dość niewielka, nigdy tego nie robię. Jednak, jak powiedzieli inni, przeglądarka szybko staje się miejscem, w którym pracujemy, cała nasza praca, a coraz więcej przeglądarek zastępuje edytory tekstu i inne aplikacje tradycyjnie używane na komputerach stacjonarnych, użytkownicy są przyzwyczajeni do klawiatury skrótów, więc wspieranie ich jest koniecznością dla użyteczności i przyjęcia. Jeśli utworzysz edytor tekstu i każesz mi nacisnąć ALT + SHIFT + S lub coś gorszego, porzucę twoją aplikację jako zły nawyk jako użytkownik.
DavidScherer,
4

@Eevee: Ponieważ przeglądarka staje się domem dla bogatszych i bogatszych funkcji i zaczyna zastępować aplikacje komputerowe, po prostu nie będzie można zrezygnować ze skrótów klawiaturowych. Bogaty i intuicyjny zestaw poleceń klawiaturowych Gmaila odegrał kluczową rolę w mojej chęci porzucenia Outlooka. Skróty klawiaturowe w Todoist, Czytniku Google i Kalendarzu Google ułatwiają mi codzienne życie.

Deweloperzy zdecydowanie powinni uważać, aby nie zastąpić naciśnięć klawiszy, które już mają znaczenie w przeglądarce. Na przykład pole tekstowe WMD, w którym piszę, w niewytłumaczalny sposób interpretuje Ctrl+ Deljako „cytat blokowy”, a nie „usuń słowo do przodu”. Ciekaw jestem, czy istnieje gdzieś standardowa lista „bezpiecznych dla przeglądarki” skrótów, z których mogą korzystać twórcy witryn i od których przeglądarki będą się trzymać z daleka w przyszłych wersjach.

Herb Caudill
źródło
1
Odpowiedź brzmi: nie, nie ma bezpiecznej listy skrótów bezpiecznych dla przeglądarki. Jest to dobre z dwóch powodów: 1. Skróty są konfigurowalne (przynajmniej w Operze). 2. W ten sposób nie ograniczasz kreatywności producentów przeglądarek, aby dać ci więcej możliwości dla samego użycia przeglądarki.
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.

To jest wersja up-to-date z @ odpowiedź AlanBellows męska, zastępując whichz key. Działa również z usterką klawisza wielkiego Chrome (gdzie po naciśnięciu Ctrl+ Swysyła duże S zamiast s). Działa we wszystkich nowoczesnych przeglądarkach.

Cannicide
źródło
Aby to sprawdzić, kliknij w polu fragmentu i naciśnij Ctrl + S.
Cannicide
1

To było moje rozwiązanie, które jest znacznie łatwiejsze do odczytania niż inne sugestie tutaj, może z łatwością zawierać inne kombinacje klawiszy i zostało przetestowane w IE, Chrome i 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;
});
R. Salisbury
źródło
1
+1 za użycie String.fromCharCode. Chociaż komputery Mac nie mają klawisza sterującego. Sprawdź klawisz polecenia za pomocą evt.metaKey. Wraca truedo Cmd na Macu i Win w Windows.
KatoFett
1

Podoba mi się ta mała wtyczka . Wymaga jednak nieco większej zgodności z różnymi przeglądarkami.

misteraidan
źródło
0

To powinno działać (dostosowane z 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;
    }
}); 
miednice
źródło
0

Do Alana Bellowsa odpowiedź:! (E.altKey) dodany dla użytkowników, którzy używają AltGrpodczas pisania (np. Polska). Bez tego naciśnięcie AltGr+ Sda taki sam wynik jak 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
źródło
0

Ta wtyczka stworzona przeze mnie może być pomocna.

Podłącz

Możesz użyć tej wtyczki, aby podać kluczowe kody i funkcje, aby uruchomić w ten sposób

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

W kodzie pokazałem jak wykonać dla Ctrl+ S. Otrzymasz szczegółową dokumentację pod linkiem. Wtyczka znajduje się w sekcji kodu JavaScript Mojego pióra na Codepen.

10011101111
źródło
0

Rozwiązałem swój problem w IE , używając znaku, alert("With a message")aby zapobiec domyślnemu zachowaniu:

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
źródło