Захват комбинации клавиш Ctrl + Z в javascript

Я пытаюсь захватить комбинацию клавиш ctrl + z в javascript с помощью этого кода:

<html>
<head>
    <title>Untitled Document</title>
</head>
<body>

    <script type='text/javascript'>
        function KeyPress(e) {
            var evtobj = window.event? event : e


            //test1 if (evtobj.ctrlKey) alert("Ctrl");
            //test2 if (evtobj.keyCode == 122) alert("z");
            //test 1 & 2
            if (evtobj.keyCode == 122 && evtobj.ctrlKey) alert("Ctrl+z");
        }

        document.onkeypress = KeyPress;
    </script>

</body>
</html>

Комментируемая строка "test1" генерирует предупреждение, если я удерживаю клавишу ctrl и нажимаю любую другую клавишу.

Комментируемая строка "test2" генерирует предупреждение, если я нажимаю клавишу z.

Поместите их вместе по строке после "теста 1 и 2" и удерживая клавишу ctrl, а нажатие клавиши z не генерирует предупреждение, как ожидалось.

Что не так с кодом?

Ответ 1

  • Используйте onkeydown (или onkeyup), а не onkeypress
  • Используйте keyCode 90, а не 122

Демо-версия онлайн: http://jsfiddle.net/29sVC/

Чтобы уточнить, коды клавиш не совпадают с кодами символов.

Коды символов предназначены для текста (они различаются в зависимости от кодировки, но во многих случаях 0-127 остаются кодами ASCII). Коды клавиш сопоставляются клавишам на клавиатуре. Например, в символе Unicode 0x22909 означает 好. Существует не так много клавиатур (если есть), у которых на самом деле есть ключ для этого.

ОС заботится о преобразовании нажатий клавиш в коды символов с использованием методов ввода, которые пользователь настроил. Результаты отправляются на событие нажатия клавиши. (В то время как keydown и keyup реагируют на нажатия кнопок пользователя, не вводя текст.)

Ответ 2

Ctrl + t также возможно... просто используйте код ключа как 84, например

if (evtobj.ctrlKey && evtobj.keyCode == 84) 
 alert("Ctrl+t");

Ответ 3

$(document).keydown(function(e){
  if( e.which === 89 && e.ctrlKey ){
     alert('control + y'); 
  }
  else if( e.which === 90 && e.ctrlKey ){
     alert('control + z'); 
  }          
});

демонстрация

Ответ 4

90 - это клавиша Z, и это сделает необходимый захват...

function KeyPress(e){
     // Ensure event is not null
     e = e || window.event;

     if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) {
         // Ctrl + Z
         // Do Something
     }
}

В зависимости от ваших требований вы можете добавить e.preventDefault(); в свой оператор if, чтобы исключительно выполнять свои пользовательские функции.

Ответ 5

Для будущих людей, которые сталкиваются с этим вопросом, вот лучший способ выполнить работу:

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'z') {
    alert('Undo!');
  }
});

Использование event.key значительно упрощает код, удаляя жестко закодированные константы. Он поддерживает IE 9+, см. Документацию здесь: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Кроме того, использование document.addEventListener означает, что вы не будете заглушать других слушателей тем же событием. См. Https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener.

Наконец, нет никаких причин использовать window.event, он активно не рекомендуется и может привести к хрупкому коду. См. Https://developer.mozilla.org/en-US/docs/Web/API/Window/event

Ответ 6

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

Плагин

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

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

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

Ответ 7

Используйте этот код для CTRL + Z. keycode для Z в keypress равен 122, а CTRL + Z - 26. проверьте этот код ключа в области консоли

 $(document).on("keypress", function(e) {
       console.log(e.keyCode);
       /*ctrl+z*/
       if(e.keyCode==26)
       {
          //your code here
       }
    });