Як я можу перевірити, чи натискається клавіша під час події клацання за допомогою jQuery?


105

Я хотів би зафіксувати подію клацання за допомогою jQuery і мати змогу сказати, чи натискали клавішу одночасно, щоб я міг розщедритися у межах функції зворотного дзвінка на основі події натискання клавіші.

Наприклад:

$("button").click(function() {
    if([KEYPRESSED WHILE CLICKED]) {
        // Do something...
    } else {
        // Do something different...
    }
});

Це взагалі можливо чи як це можна зробити, якщо це можливо?

Відповіді:


174

Ви можете легко виявити зрушення, клавішу alt та керування з властивостей події;

$("button").click(function(evt) {
  if (evt.ctrlKey)
    alert('Ctrl down');
  if (evt.altKey)
    alert('Alt down');
  // ...
});

Дивіться quirksmode для отримання додаткових властивостей. Якщо ви хочете виявити інші клавіші, дивіться відповідь клетуса .


3
Я не бачу цієї властивості на об’єкті jQuery Event: api.jquery.com/category/events/event-object
cletus

1
Ну, як зазначається на сторінці, "Більшість властивостей з оригінальної події копіюються та нормалізуються на новий об'єкт події". ctrlKey, altKey тощо є частиною стандарту ecmascript (див. перше посилання на вищезгаданій сторінці jquery api), тому (принаймні у пристойних браузерах) об'єкт події зазвичай також має ці властивості.
kkyy

3
У режимі диваків лише зазначено, що вони визначені в ключовій події .. про подію миші немає згадки.

6
Ви навіть можете виявити командний ключ Mac OS X, використовуючи if (e.metaKey) alert('Command down'). Ось приємна стаття про ключові події у JS unixpapa.com/js/key.html
F Lekschas

48

Вам потрібно окремо відстежувати стан ключа, використовуючи keydown()та keyup():

var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = true;
  }
}).keyup(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = false;
  }
});

Див. Список основних кодів . Тепер ви можете перевірити це:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});

6
Один нижній бік цього методу (не те, що я знаю кращого способу) - якщо ви виявляєте ключ ALT, а користувач ALT-Tabs до іншого вікна, браузер не визначає подію клавіатури, оскільки вона сталася в іншій програмі . З цього моменту jquery вважає, що ключ не працює, поки вони не вводяться в програму jquery. Це стосується лише клавіші ALT, наскільки я можу собі уявити.
Плоский кіт

1
Для Mac OS X це буде Cmd-Tab, але я думаю, що головне все-таки дотримується
murftown

1
Або Ctrl + Tab для зміни вкладки браузера
Seeven


3

Без крадіжки грому @Arun Prasad , ось чистий фрагмент JS, який я повторно повторив, щоб зупинити дію за замовчуванням, яка в іншому випадку відкриє нове вікно, якщо натиснути CTL + клацання.

function Show(event) 
{
  if (event.ctrlKey) 
  {
    alert('Ctrl held down which clicked');
  } 
  else 
  {
    alert('Ctrl NOT pressed');
  }
  return false
}
<p>Hold down CTL on the link to get a different message</p>

<a href="" onclick="return Show(event)">click me</a>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.