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



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


$(window).keypress(function(event) {
if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
alert("Ctrl-S pressed");
event.preventDefault();
return false;
});
Коды клавиш могут различаться в зависимости от браузера, поэтому вам может потребоваться проверить более 115.
@ Тадас, @ Джим. Я обновил сообщение, чтобы включить поддержку webkit
У меня работает только в Firefox. IE9 и Chrome не регистрируют нажатия клавиш.
Даже с $ (document) .keypress (вместо $ (window) .keypress) IE и Chrome по-прежнему захватывают событие нажатия клавиши с помощью 'Ctrl' до того, как это сделает скрипт.
По какой-то причине Chrome возвращает мне код символа 83 (заглавная буква S) вместо 115, см. Ответ ниже для рабочего решения Chrome с более общим решением проблемы с различными кодами символов.
используйте keydown вместо keypress в хроме
лучше использовать ... if (! (e.which == 83 && e.ctrlKey) &&! (e.which == 17)) {(17, а не 19) Потому что в keycode: ctrl равно 17, а s равно 83
Я использую FF 41. Браузер сначала захватывает клавиши, а затем всплывает предупреждение.
используйте e.metaKey для переназначенных клавиатур - также см. ответ Дэнни
К сожалению, он устарел
К сожалению, больше не работает. Ответ ниже работает безупречно.
Вы можете использовать библиотека ярлыков для обработки специфичных для браузера вещей.
shortcut.add("Ctrl+S",function() {
alert("Hi there!");
});
Он был преобразован в плагин jQuery, разветвлен и переработан и теперь поддерживает 1.6.x: github.com/ricardovaleriano/jquery.hotkeys
Для других сотрудников Google обновленный URL-адрес для плагина jQuery: github.com/jeresig/jquery.hotkeys
Честно говоря, я бы хотел, чтобы веб-приложения не переопределяли мои сочетания клавиш по умолчанию. Ctrl + S уже что-то делает в браузерах. Резкое изменение в зависимости от сайта, который я просматриваю, деструктивно и расстраивает, не говоря уже о том, что часто возникают ошибки. У меня были сайты, захватившие Ctrl + Tab, потому что они выглядели так же, как Ctrl + I, что разрушало мою работу над сайтом и не позволяло мне переключать вкладки как обычно.
Если вам нужны сочетания клавиш, используйте атрибут accesskey. Пожалуйста, не нарушайте существующие функции браузера.
Я полностью согласен, но, к сожалению, я реализатор, а не принимаю решения.
Верно, но CTRL + S - нечасто используемая функция. Я сомневаюсь, что люди пропустят это, особенно если это означает, что вы можете сохранить свой файл в своем веб-приложении.
Обычно я согласен с вами, но единственный раз, когда я Когда-либо использую ctrl-s в браузере, я забываю, что использую веб-приложение, и ожидаю, что ярлык сделает что-то полезное. Обычно я разочарован. Gmail сохраняет вашу электронную почту, когда вы нажимаете ctrl-s, хотя вы этого никогда не заметите, потому что, когда он просто делает то, что вы от него ожидаете, и то, что делает каждое настольное приложение, вы на самом деле не замечаете. Вы ДЕЙСТВИТЕЛЬНО замечаете, когда он думает, что хотите сохранить Gmail как HTML, и это раздражает.
Это действительно зависит от приложения. Я создаю веб-приложение эмулятора терминала, и переопределение ctrl + c кажется практичным, если в этом нет необходимости.
Необходимость в сохранении HTML-страницы довольно незначительна, я никогда этого не делал. Однако, как говорили другие, браузер быстро становится местом, где мы работаем, вся наша работа, и все больше и больше браузеров заменяют текстовые процессоры и другие приложения, традиционно используемые на настольных компьютерах, пользователи привыкли к своей клавиатуре. ярлыки, поэтому их поддержка необходима для удобства использования и внедрения. Если вы создадите текстовый процессор и заставите меня нажать ALT + SHIFT + S или что-то еще хуже, я выкину ваше приложение как дурную привычку как пользователь.
Я сомневаюсь, почему вашему футуристическому веб-приложению в модных штанах нужно, чтобы я в первую очередь явно просил сохранить. и если вы создадите что-либо, который нарушает некоторые из моих основных функций браузера, я сам откажусь от него - я поднял ад на веб-сайты, которые крадут / для фокусировки своего собственного поиска, когда это уже ярлык в firefox.
Пусть тот, кто ни разу случайно не нажал Ctrl + S, чтобы отправить форму, бросит первый камень.
@Eevee: Поскольку браузер становится домом для все более богатой и богатой функциональности и начинает заменять настольные приложения, у него просто не будет возможности отказаться от использования сочетаний клавиш. Богатый и интуитивно понятный набор клавиатурных команд Gmail помог мне отказаться от Outlook. Сочетания клавиш в Todoist, Google Reader и Google Calendar делают мою жизнь намного проще в повседневной жизни.
Разработчикам определенно следует быть осторожными, чтобы не переопределить нажатия клавиш, которые уже имеют значение в браузере. Например, текстовое поле WMD, в которое я ввожу, необъяснимо интерпретирует Ctrl + Del как «Цитата», а не как «удалить слово вперед». Мне любопытно, есть ли где-нибудь стандартный список «безопасных для браузера» ярлыков, которые могут использовать разработчики сайтов и от которых браузеры возьмут обязательство избегать в будущих версиях.
Ответ: нет, безопасного списка безопасных для браузера ярлыков не существует. И это хорошо по двум причинам: 1. Ярлыки можно настраивать (по крайней мере, в Opera). 2. Поступая таким образом, вы не ограничиваете творческий потенциал производителя браузера, чтобы дать вам больше возможностей для использования самого браузера.
Мне нравится этот маленький плагин. Однако ему нужно немного больше кроссбраузерности.
пример:
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, я буду рад услышать, а также, если кто-нибудь протестирует это в других браузерах, я буду рад узнать, работает это или нет
У меня такая же проблема с хромом. Такая боль!
p.s. теперь, когда я смотрю на это, я думаю, что preventDefault избыточен, поскольку return false запускает его (и stopPropagation), но не уверен, что это имеет большое значение для вопроса
Это работает для меня (с использованием 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.
Выполнимо с чистым JS, если вы используете window.addEventListener( вместо $(window).bind(
В FF 27.0.1 это одновременно предупреждает и открывает диалоговое окно «Сохранить страницу», принятый ответ - нет.
@NatesS, если вы удалите предупреждение, он не откроет диалоговое окно сохранения. Это вызвано предупреждением. У меня отлично работает во всех браузерах. Хороший обходной путь.
Это был единственный вариант, который работал у меня в IE11 и, следовательно, в веб-просмотре приложения для магазина Windows. Я обнаружил странную проблему, когда CTRL + O или CTRL + P, похоже, не обращают внимания на event.preventDefault. В этих случаях письмо проходит после обработки ярлыка.
Работал у меня. Пожалуйста, примите этот ответ, а не приведенный выше.
В настоящее время лучше использовать нажатие клавиши вместо нажатия клавиши
Как бы вы захватили Ctrl-Shift-S или другие более сложные комбинации с этим? Я попытался добавить else if ((event.ctrlKey || event.metaKey) && event.shiftKey ) { switch (String.fromCharCode(event.which)) { после начального оператора if, но безуспешно
@Fireflight: else if не будет работать, потому что исходный оператор if уже будет оценен как истинный. Вам нужно будет поместить свой код перед исходным заявлением if, превратив оригинал в else if.
Это решение 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;
});
Это единственное решение, которое здесь работает правильно. Большое спасибо!
сейчас это может быть устаревшим: используйте e.key вместо e.which;
Обновлено 14 мая 2017 г. по современным стандартам.
Я объединил несколько вариантов для поддержки 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.
Этот созданный мной плагин может быть вам полезен.
Вы можете использовать этот плагин, чтобы указать ключевые коды и функции, которые будут запускаться следующим образом
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.
в браузерах OS X webkit cmd + s возвращает 19, так что это тоже стоит проверить. т.е. если (! (event.which == 115 && event.ctrlKey) &&! (event.which == 19)) return true;