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.

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.


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

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

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


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

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.


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.


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.


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

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


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


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

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.


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;
        }
    }
});
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.