Обработка комбинаций Ctrl/Shift/Alt в jQuery и JavaScript

Быстрый ответ

Для выявления активации клавиш Ctrl, Shift и Alt совместно с кликом применяйте свойства ctrlKey, shiftKey и altKey объекта event. Они служат булевыми индикаторами активации этих клавиш.

Пример кода:

document.addEventListener('click', (event) => {
  console.log(`Ctrl: ${event.ctrlKey}, Shift: ${event.shiftKey}, Alt: ${event.altKey}`);
});

Этот скрипт выведет в консоль булевые значения для клавиш Ctrl, Shift и Alt при наступлении события клика.

Определение активации правых или левых модификаторов

В некоторых случаях важно знать, какая клавиша, правая или левая, была активирована. Рассмотрим использование свойств event.ctrlLeft и event.altLeft. Однако, учтите что полная совместимость этих свойств между различными браузерами не гарантируется.

document.addEventListener('click', (event) => {
  if (event.ctrlKey) {
    var side = event.ctrlLeft ? 'левая' : 'правая';
    console.log(`Нажата ${side} клавиша Ctrl. Вы как профессионал!`);
  }
});

Нейтрализация стандартного поведения

Для отмены стандартных действий браузера при использовании специалных комбинаций клавиш, используйте event.preventDefault().

document.addEventListener('click', (event) => {
  if (event.ctrlKey) {
    event.preventDefault();
    console.log('Стандартная комбинация клавиш была отменена с помощью preventDefault.');
  }
});

Улучшенное управление событиями с помощью jQuery

При работе с jQuery лучше использовать метод .on() вместо .bind(), чтобы эффективнее управлять событиями.

$(document).on('click', (event) => {
  if (event.shiftKey) {
    console.log('Совместно с кликом была активирована клавиша Shift. Это забавно!');
  }
});

Визуализация

Считайте клавиатуру экстравагантным входом в клуб:

Обычный клик:
🚪🖱️ -> Обычный клиент прибыл!

Клик + Ctrl:
🚪🧻🔒🖱️ -> Добро пожаловать, обладатель пропуска Ctrl!

Клик + Shift:
🚪🧻⬆️🖱️ -> Мы рады представителю клуба Shift!

Клик + Alt:
🚪🧻🌀🖱️ -> Впустите гостя с бейджиком Alt!

Каждый из этих символов открывает двери в новые области вашего приложения.

Различия в браузерах: некоторые тонкости

Хотя работа модификаторных клавиш наиболее стандартная, могут возникнуть незначительные различия в их поведении в зависимости от браузера и операционной системы. Например, на MacOS metaKey может выполнять функции ctrlKey. Учитывайте эти особенности.

document.addEventListener('click', (event) => {
  const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
  const ctrlOrCmd = isMac ? event.metaKey : event.ctrlKey;
  console.log(`Нажатие Ctrl на Windows или Cmd на Mac?: ${ctrlOrCmd}`);
});

Ограничения в обработке нажатий

Во время обработки кликов с активированными модификаторными клавишами следует учесть определённые ограничения. Например, одновременное нажатие Ctrl + Alt + Shift будет воспринято так же, как и активация каждой из этих клавиш по отдельности. Для сложных задач стоит использовать отдельные обработчики для каждого события клавиатуры.

Обратная связь с пользователем

Качественная обратная связь – гарантия успешного UX. Пользователи оценят, если они увидят, что их действия с клавишами были правильно учтены, или когда они допустили ошибку. Не оставляйте их в непонятке.

document.addEventListener('click', (event) => {
  if (event.ctrlKey && event.altKey) {
    showMessage('Вы активировали комбинацию Ctrl + Alt! Открыта секретная функция!');
  }
});

Полезные ссылки

1. MouseEvent – Web API | MDN
2. Обработка клавиатурных событий
3. Справочник событий | MDN
4. Метод addEventListener() в HTML DOM