2016-08-29 2 views
0

Я пытаюсь поймать как Ctrl - S и Cmd - S в браузерах для кросс-OS Совместимость моего веб-приложения. Я увидел нить о том, как сделать это здесь: jquery keypress event for cmd+s AND ctrl+sНе удается поймать Cmd-S на Chrome на Mac

У меня есть следующий фрагмент кода в моем коде:

$(document).keypress(function(event) { 
    if (event.which == 115 && (event.ctrlKey||event.metaKey)|| (event.which == 19)) { 
    event.preventDefault(); 
    save(); 
    return false; 
    } 
    return true; 
}); 

где save() является функция JavaScript, которая будет посылать запрос AJAX в будущем, но только имеет alert('Saved!');.

Однако, несмотря на это улавливает Ctrl - S, он не ловит Cmd - S на Chrome, а не просто открыть диалог сохранения веб-страницы, как обычно. Я видел, что у кого-то на этой странице была такая же проблема, но я не видел решения для этого.

Заранее благодарен!

+0

отметить также, 'событие нажатия клавиши не охватывается какой-либо официальной спецификации, фактическое поведение встречается при его использовании может отличаться в разных браузерах, версии браузеров и platforms.' (от официальный [jQuery doc для 'keypress'] (https://api.jquery.com/keypress/)). Возможно, вы захотите рассмотреть возможность использования 'keypress' вообще. – filoxo

+0

@filoxo Спасибо, что сообщили мне :) –

ответ

0

Я думаю, что нажатие клавиши, как и у вас, не регистрирует metakeys совершенно так же, см.: Diffrence between keyup keydown keypress and input events вот скрипка, которая, кажется, работает с помощью keydown, а затем захватывает каждую последовательность. Надеюсь, поможет?

var metaflag = false; 
 

 
$(document).on({ 
 
\t keydown: function(event) { 
 
    if (event.ctrlKey||event.metaKey || event.which === 19) { 
 
     event.preventDefault(); 
 
     $('.monitor').text('key '+event.which); 
 
     metaflag = true; 
 
    } 
 
    \t if(metaflag && event.which === 83){ // 83 = s? 
 
     event.preventDefault(); // maybe not necessary 
 
     $('.display').text('saving?'); 
 
     metaflag = false; 
 
    } 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='monitor'></div> 
 
<div class='display'></div>

+0

Это прекрасно работает. Благодаря! : D –

Смежные вопросы