Захоплення комбінації клавіш ctrl + z у javascript


85

Я намагаюся захопити 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клавішу, не створюється попередження, як очікувалося.

Що не так з кодом?

Відповіді:


95
  1. Використовуйте onkeydown(або onkeyup), ніonkeypress
  2. Використовуйте keyCode90, а не 122

Інтернет-демонстрація: http://jsfiddle.net/29sVC/

Для уточнення, коди клавіш - це не те саме, що коди символів.

Коди символів призначені для тексту (вони різняться залежно від кодування, але в багатьох випадках 0-127 залишаються кодами ASCII). Коди клавіш зіставляються з клавішами на клавіатурі. Наприклад, в символі юнікоду 0x22909 означає 好. Існує не так багато клавіатур (якщо вони є), які насправді мають ключ для цього.

ОС піклується про перетворення натискань клавіш у коди символів за допомогою методів введення, налаштованих користувачем. Результати надсилаються на подію натискання клавіші. (Тоді як клавіатура та клавіатура реагують на натискання користувачем кнопок, а не на введення тексту.)


1
Дякую, це працює. Чому onkeypress і keyCode 122 не працюють?
Пол Джонстон,

Як запобігтиDefault () замість попередження у своєму рішенні, будь ласка? Я тестую на Ctrl + t.
Surendra Jnawali

@SJnawali: Я не впевнений, що це можливоctrl+t
zerkms

4
чому keyCode 122 не працює? ну, 122це для клавіші F11 :)
Дитина

7
@PaulJohnston Оскільки код ключа не такий, як код символу . Коди символів призначені для тексту (вони різняться залежно від кодування, але в багатьох випадках 0-127 залишаються кодами ASCII). Коди клавіш зіставляються з клавішами на клавіатурі. Наприклад, в символі юнікоду 0x22909 означає 好. Існує не так багато клавіатур (якщо вони є), які насправді мають ключ для цього. ОС піклується про перетворення натискань клавіш у символьні коди за допомогою методів введення, налаштованих користувачем. Результати надсилаються на keypressзахід. ( В той час як keydownі keyupреагувати на натискання користувачем кнопки, а не вводити текст.)
Aidiakapi

28

Для майбутніх людей, які натрапляють на це питання, ось кращий спосіб зробити роботу:

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

Використання event.keyзначно спрощує код, видаляючи закодовані константи. Він підтримує IE 9+.

Крім того, використання document.addEventListenerозначає, що ви не будете обмежувати інших слухачів до тієї самої події.

Нарешті, немає жодної причини для використання window.event. Це активно не рекомендується і може призвести до крихкого коду.


Крім того, я хотів би додати, що KeyboardEvent.keyCodeзараз застаріла ще кілька років тому. Найкращий спосіб захопити всі браузери - це e.keyспочатку перевірка, а потім повернення до e.keyCode. Або ви можете скористатися цим поліфілом
Так, Баррі

9

Ctrl+ tтакож можливо ... просто використовуйте код клавіші як 84, як

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

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

Демо


3

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, щоб виключно виконувати власні функції.


-3

Цей розроблений мною плагін може бути корисним.

Підключати

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

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

У коді я показав, як виконувати для Ctrl+ Z. Ви отримаєте докладну документацію за посиланням. Плагін знаходиться в розділі коду JavaScript мого пера на Codepen.


-5

Використовуйте цей код для CTRL+ Z. код клавіші для Zнатискання клавіші - 122, а CTRL+ Z- 26. перевірте цей код клавіші в області консолі

 $(document).on("keypress", function(e) {
       console.log(e.keyCode);
       /*ctrl+z*/
       if(e.keyCode==26)
       {
          //your code here
       }
    });
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.