Лучший кросс-браузерный метод для захвата CTRL + S с JQuery? - PullRequest
150 голосов
/ 18 сентября 2008

Мои пользователи хотели бы иметь возможность нажать Ctrl + S , чтобы сохранить форму. Есть ли хороший кросс-браузерный способ захвата комбинации клавиш Ctrl + S и отправки моей формы?

Приложение построено на Drupal, поэтому доступен jQuery.

Ответы [ 16 ]

230 голосов
/ 06 января 2013

Это работает для меня (с помощью jquery) для перегрузки Ctrl + S , Ctrl + F и 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;
        }
    }
});
118 голосов
/ 18 сентября 2008
$(window).keypress(function(event) {
    if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
    alert("Ctrl-S pressed");
    event.preventDefault();
    return false;
});

Коды клавиш могут отличаться в разных браузерах, поэтому вам может потребоваться проверить не только 115.

33 голосов
/ 18 сентября 2008

Вы можете использовать библиотеку ярлыков для работы с браузером.

shortcut.add("Ctrl+S",function() {
    alert("Hi there!");
});
26 голосов
/ 17 января 2013

Это решение jQuery работает для меня в Chrome и Firefox как для Ctrl + S , так и для 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;
}); 
25 голосов
/ 23 апреля 2012

Этот работал для меня на Chrome ... по какой-то причине event.which возвращает мне заглавную букву S (83), не знаю, почему (независимо от состояния блокировки заглавных букв), поэтому я использовал fromCharCode и toLowerCase только для того, чтобы быть в безопасности

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

Если кто-то знает, почему я получаю 83 , а не 115 , я буду рад услышать, также, если кто-нибудь проверит это в других браузерах, я буду рад услышать, если это работает или нет

7 голосов
/ 20 марта 2013

Я объединил несколько вариантов поддержки FireFox, IE и Chrome. Я также обновил его, чтобы лучше поддерживать 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 голосов
/ 18 сентября 2008

Я бы хотел, чтобы веб-приложения не переопределяли мои стандартные сочетания клавиш, если честно. Ctrl + S уже что-то делает в браузерах. Это внезапное изменение в зависимости от сайта, который я просматриваю, разрушительно и разочаровывает, не говоря уже о том, что оно часто глючит. У меня были сайты угон Ctrl + Tab , потому что это выглядело так же, как Ctrl + I , оба разрушают мою работу на сайте и мешает мне переключать вкладки как обычно.

Если вам нужны сочетания клавиш, используйте атрибут accesskey. Пожалуйста, не нарушайте существующие функции браузера.

4 голосов
/ 05 ноября 2008

@ Eevee: Поскольку браузер становится домом для все более и более функциональных функций и начинает заменять настольные приложения, он просто не сможет отказаться от использования сочетаний клавиш. Богатый и интуитивно понятный набор команд клавиатуры Gmail способствовал моей готовности отказаться от Outlook. Сочетания клавиш в Todoist, Google Reader и Google Calendar - все это делает мою жизнь намного проще в повседневной жизни.

Разработчики должны быть осторожны, чтобы не отменять нажатия клавиш, которые уже имеют значение в браузере. Например, текстовое поле ОМУ, которое я набираю, необъяснимым образом интерпретирует Ctrl + Del как "Цитата", а не как "удалить слово вперед" Мне любопытно, есть ли где-нибудь стандартный список «безопасных для браузера» ярлыков, которые разработчики сайтов могут использовать, и которые браузеры обязуются избегать в будущих версиях.

3 голосов
/ 14 мая 2017

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

Это обновленная версия ответа @ AlanBellows, заменяющая which на key. Он также работает даже при сбое в Chrome (когда вы нажимаете Ctrl + S , он отправляет заглавную S вместо s). Работает во всех современных браузерах.

1 голос
/ 10 июня 2009

Мне нравится этот маленький плагин . Это требует немного большей кроссбраузерности.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...