Лучший кросс-браузерный метод для захвата CTRL + S с помощью JQuery?

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
171
0
116 000
16
Перейти к ответу Данный вопрос помечен как решенный

Ответы 16

Ответ принят как подходящий

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

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

в браузерах OS X webkit cmd + s возвращает 19, так что это тоже стоит проверить. т.е. если (! (event.which == 115 && event.ctrlKey) &&! (event.which == 19)) return true;

Tadas T 22.10.2010 13:05

@ Тадас, @ Джим. Я обновил сообщение, чтобы включить поддержку webkit

balupton 19.05.2011 05:48

У меня работает только в Firefox. IE9 и Chrome не регистрируют нажатия клавиш.

pelms 06.01.2012 18:54

Даже с $ (document) .keypress (вместо $ (window) .keypress) IE и Chrome по-прежнему захватывают событие нажатия клавиши с помощью 'Ctrl' до того, как это сделает скрипт.

pelms 06.01.2012 19:23

По какой-то причине Chrome возвращает мне код символа 83 (заглавная буква S) вместо 115, см. Ответ ниже для рабочего решения Chrome с более общим решением проблемы с различными кодами символов.

Eran Medan 23.04.2012 04:57

используйте keydown вместо keypress в хроме

destan 29.09.2012 15:09

лучше использовать ... if (! (e.which == 83 && e.ctrlKey) &&! (e.which == 17)) {(17, а не 19) Потому что в keycode: ctrl равно 17, а s равно 83

FabioSorre 21.11.2014 10:40

Я использую FF 41. Браузер сначала захватывает клавиши, а затем всплывает предупреждение.

Daniel Cheung 13.06.2015 06:46

используйте e.metaKey для переназначенных клавиатур - также см. ответ Дэнни

steve 21.10.2015 21:22

К сожалению, он устарел

Cannicide 09.09.2017 18:25

К сожалению, больше не работает. Ответ ниже работает безупречно.

Matheus de Lara Calache 15.12.2019 21:26

Вы можете использовать библиотека ярлыков для обработки специфичных для браузера вещей.

shortcut.add("Ctrl+S",function() {
    alert("Hi there!");
});

Он был преобразован в плагин jQuery, разветвлен и переработан и теперь поддерживает 1.6.x: github.com/ricardovaleriano/jquery.hotkeys

Félix Saparelli 26.07.2011 08:08

Для других сотрудников Google обновленный URL-адрес для плагина jQuery: github.com/jeresig/jquery.hotkeys

bgs264 09.07.2012 19:57

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

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

Я полностью согласен, но, к сожалению, я реализатор, а не принимаю решения.

ceejayoz 19.09.2008 01:55

Верно, но CTRL + S - нечасто используемая функция. Я сомневаюсь, что люди пропустят это, особенно если это означает, что вы можете сохранить свой файл в своем веб-приложении.

EndangeredMassa 05.11.2008 21:09

Обычно я согласен с вами, но единственный раз, когда я Когда-либо использую ctrl-s в браузере, я забываю, что использую веб-приложение, и ожидаю, что ярлык сделает что-то полезное. Обычно я разочарован. Gmail сохраняет вашу электронную почту, когда вы нажимаете ctrl-s, хотя вы этого никогда не заметите, потому что, когда он просто делает то, что вы от него ожидаете, и то, что делает каждое настольное приложение, вы на самом деле не замечаете. Вы ДЕЙСТВИТЕЛЬНО замечаете, когда он думает, что хотите сохранить Gmail как HTML, и это раздражает.

Carson Myers 15.01.2012 06:54

Это действительно зависит от приложения. Я создаю веб-приложение эмулятора терминала, и переопределение ctrl + c кажется практичным, если в этом нет необходимости.

Brack 31.07.2012 17:52

Необходимость в сохранении HTML-страницы довольно незначительна, я никогда этого не делал. Однако, как говорили другие, браузер быстро становится местом, где мы работаем, вся наша работа, и все больше и больше браузеров заменяют текстовые процессоры и другие приложения, традиционно используемые на настольных компьютерах, пользователи привыкли к своей клавиатуре. ярлыки, поэтому их поддержка необходима для удобства использования и внедрения. Если вы создадите текстовый процессор и заставите меня нажать ALT + SHIFT + S или что-то еще хуже, я выкину ваше приложение как дурную привычку как пользователь.

DavidScherer 10.12.2014 18:47

Я сомневаюсь, почему вашему футуристическому веб-приложению в модных штанах нужно, чтобы я в первую очередь явно просил сохранить. и если вы создадите что-либо, который нарушает некоторые из моих основных функций браузера, я сам откажусь от него - я поднял ад на веб-сайты, которые крадут / для фокусировки своего собственного поиска, когда это уже ярлык в firefox.

Eevee 10.12.2014 22:37

Пусть тот, кто ни разу случайно не нажал Ctrl + S, чтобы отправить форму, бросит первый камень.

KevBurnsJr 02.11.2016 00:14

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

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

Ответ: нет, безопасного списка безопасных для браузера ярлыков не существует. И это хорошо по двум причинам: 1. Ярлыки можно настраивать (по крайней мере, в Opera). 2. Поступая таким образом, вы не ограничиваете творческий потенциал производителя браузера, чтобы дать вам больше возможностей для использования самого браузера.

gizmo 05.11.2008 21:10

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

пример:

shortcut.add("Ctrl+c",function() {
    alert('Ok...');
}
,{
    'type':'keydown',
    'propagate':false,
    'target':document
});

использование

<script type = "text/javascript" src = "js/shortcut.js"></script>

ссылка для скачивания: http://www.openjs.com/scripts/events/keyboard_shortcuts/#

Это должно работать (адаптировано из 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;
    }
}); 

Это сработало для меня в 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, я буду рад услышать, а также, если кто-нибудь протестирует это в других браузерах, я буду рад узнать, работает это или нет

У меня такая же проблема с хромом. Такая боль!

qodeninja 23.01.2013 21:56

p.s. теперь, когда я смотрю на это, я думаю, что preventDefault избыточен, поскольку return false запускает его (и stopPropagation), но не уверен, что это имеет большое значение для вопроса

Eran Medan 22.04.2013 17:39

Это работает для меня (с использованием 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;
        }
    }
});

Это единственный ответ, который работал у меня во всех протестированных мной браузерах, включая Chrome версии 28.0.1500.71.

T. Brian Jones 22.07.2013 20:49

Выполнимо с чистым JS, если вы используете window.addEventListener( вместо $(window).bind(

user1846065 21.10.2013 02:44

В FF 27.0.1 это одновременно предупреждает и открывает диалоговое окно «Сохранить страницу», принятый ответ - нет.

NateS 22.03.2014 16:36

@NatesS, если вы удалите предупреждение, он не откроет диалоговое окно сохранения. Это вызвано предупреждением. У меня отлично работает во всех браузерах. Хороший обходной путь.

CrazyNooB 08.04.2014 13:00

Это был единственный вариант, который работал у меня в IE11 и, следовательно, в веб-просмотре приложения для магазина Windows. Я обнаружил странную проблему, когда CTRL + O или CTRL + P, похоже, не обращают внимания на event.preventDefault. В этих случаях письмо проходит после обработки ярлыка.

roryok 23.04.2014 20:12

Работал у меня. Пожалуйста, примите этот ответ, а не приведенный выше.

pavanw3b 08.01.2015 11:37

В настоящее время лучше использовать нажатие клавиши вместо нажатия клавиши

Gabriele F. 31.03.2016 19:01

Как бы вы захватили Ctrl-Shift-S или другие более сложные комбинации с этим? Я попытался добавить else if ((event.ctrlKey || event.metaKey) && event.shiftKey ) { switch (String.fromCharCode(event.which)) { после начального оператора if, но безуспешно

Fireflight 09.07.2019 19:16

@Fireflight: else if не будет работать, потому что исходный оператор if уже будет оценен как истинный. Вам нужно будет поместить свой код перед исходным заявлением if, превратив оригинал в else if.

Danny Ruijters 11.07.2019 11:10

Это решение 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;
}); 

Это единственное решение, которое здесь работает правильно. Большое спасибо!

Stephan Weinhold 22.09.2015 11:59

сейчас это может быть устаревшим: используйте e.key вместо e.which;

Cannicide 14.05.2017 19:14

Обновлено 14 мая 2017 г. по современным стандартам.

Alan Bellows 15.05.2017 03:37

Я объединил несколько вариантов для поддержки 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;
     }
});

Я решил свою проблему на IE, используя alert("With a message") для предотвращения поведения по умолчанию:

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

Ответ Алану Беллоузу:! (E.altKey) добавлен для пользователей, которые используют AltGr при наборе текста (например, Польша). Без этого нажатия AltGr + S даст тот же результат, что и 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; });

$(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). Работает во всех современных браузерах.

Чтобы проверить это, щелкните внутри поля фрагмента и нажмите Ctrl + S.

Cannicide 14.05.2017 19:19

Этот созданный мной плагин может быть вам полезен.

Плагин

Вы можете использовать этот плагин, чтобы указать ключевые коды и функции, которые будут запускаться следующим образом

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

В коде я показал, как работать с Ctrl + S. Подробную документацию вы получите по ссылке. Плагин находится в разделе кода JavaScript моего пера на Codepen.

Это было мое решение, которое намного легче читать, чем другие предложения здесь, оно может легко включать другие комбинации клавиш и было протестировано в IE, Chrome и 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 за использование String.fromCharCode. Хотя на Mac нет клавиши управления. Проверьте командную клавишу с помощью evt.metaKey. Он возвращает true для Cmd на Mac и Win на Windows.

KatoFett 01.07.2020 02:07

Другие вопросы по теме