Мои пользователи хотели бы нажать Ctrl + S, чтобы сохранить форму. Есть ли хороший кросс-браузерный способ захвата комбинации клавиш Ctrl + S и отправки моей формы?
Приложение построено на Drupal, поэтому доступен jQuery.
Мои пользователи хотели бы нажать Ctrl + S, чтобы сохранить форму. Есть ли хороший кросс-браузерный способ захвата комбинации клавиш Ctrl + S и отправки моей формы?
Приложение построено на Drupal, поэтому доступен jQuery.
$(window).keypress(function(event) {
if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
alert("Ctrl-S pressed");
event.preventDefault();
return false;
});
Коды клавиш могут различаться между браузерами, поэтому вам может потребоваться больше 115.
Это работает для меня (используя 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;
}
}
});
Вы можете использовать библиотеку ярлыков для обработки специфических материалов браузера.
shortcut.add("Ctrl+S",function() {
alert("Hi there!");
});
Это решение 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;
});
Это работало для меня в 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, я буду рад услышать, также, если кто-нибудь проверит это в других браузерах, я буду рад услышать, работает ли он или нет
Я объединил несколько вариантов поддержки 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;
}
});
Я бы хотел, чтобы веб-приложения, честно говоря, не переопределяли мои горячие клавиши по умолчанию. Ctrl + S уже что-то делает в браузерах. Внезапное изменение в зависимости от того, что я просматриваю, является разрушительным и разочаровывающим, не говоря уже о часто ошибках. У меня были сайты hijack Ctrl + Tab, потому что он выглядел так же, как Ctrl + I, как разрушая мою работу на сайте, так и препятствуя мне переключать вкладки, как обычно.
Если вам нужны сочетания клавиш, используйте атрибут accesskey
. Не нарушайте существующие функции браузера.
@Eevee: поскольку браузер становится домом для более богатых и богатых функциональных возможностей и начинает заменять настольные приложения, он просто не собирается отказываться от использования быстрых клавиш. Gmail, богатый и интуитивно понятный набор команд клавиатуры, сыграл важную роль в моей готовности отказаться от Outlook. Ярлыки клавиш в Todoist, Google Reader и Google Calendar делают мою жизнь намного, намного проще на ежедневной основе.
Разработчики обязательно должны быть осторожны, чтобы не переопределять нажатия клавиш, которые уже имеют смысл в браузере. Например, текстовое поле WMD, которое я печатаю, необъяснимо интерпретирует Ctrl + Del как "Blockquote", а не "delete word forward". Мне любопытно, есть ли в стандартном списке какие-то "безопасные для браузера" ярлыки, которые могут использовать разработчики сайтов, и что браузеры обязуются избегать в будущих версиях.
$(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.
Мне нравится этот маленький плагин. Тем не менее, для этого требуется немного больше возможностей для браузера.
Пример:
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/#
Это должно работать (адаптировано из fooobar.com/questions/45347/...).
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;
}
});
Я решил свою проблему в 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; });
Этот плагин, сделанный мной, может быть полезен.
Вы можете использовать этот плагин, который вы должны предоставить кодам и функциям клавиш, которые будут запускаться, как показано ниже.
simulatorControl([17,83], function(){
console.log('You have pressed Ctrl+Z');
});
В коде я показал, как выполнить для Ctrl + S. Вы получите подробную документацию по ссылке. Плагин находится в разделе кода JavaScript моего Pen on 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;
});