Как определить нажатие клавиши Esc?

Чистый JS

Вы можете привязать обработчик к событию keydown для документа.

Кроме того, если вы хотите убедиться, что никакая другая клавиша не нажата вместе с клавишей Esc, вы можете использовать значения ctrlKey, altKey и shiftKey.

Вот пример кода:

document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
        // Проверяем, что клавиша Esc не была нажата в комбинации с ctrl, alt или shift
        const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
        if (isNotCombinedKey) {
            console.log('Клавиша Escape была нажата без дополнительных клавиш модификации');
        }
    }
});

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

Для обработки события keydown и проверки значения keyCode и which в jQuery, вы можете использовать следующий код:

$(document).keydown(function(e){
   var code = e.keyCode || e.which;
   alert(code);
});

Этот код назначает обработчик события keydown, который будет запускаться каждый раз, когда пользователь нажимает клавишу. Внутри функции мы создаем переменную code, в которую записываем значение keyCode или which из объекта события e. После этого выводим значение в alert.

Если вам нужно также обрабатывать событие keyup, вы можете использовать аналогичный подход:

$(document).keyup(function(e){
   var code = e.keyCode || e.which;
   alert(code);
});

Таким образом, вы сможете обрабатывать события нажатия и отпускания клавиш, получая их коды.

Обратите внимание, что keyCode устарел, и рекомендуется использовать свойство key для более новых браузеров. Пример кода для keydown с использованием key:

$(document).keydown(function(e){
   alert(e.key); // Например, 'a', 'Enter'
});

Это даст вам более удобочитаемое значение клавиши.

Вот пример, как можно реализовать обработку нажатия клавиши "Escape" (код 27) на чистом JavaScript без использования jQuery:

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        // Здесь добавьте свой код
    }
});

В этом коде мы добавляем обработчик события keydown на весь документ. Когда клавиша нажата, мы проверяем, равна ли клавиша 'Escape'. Если она равна, вы можете добавить свою логику в указанное место.

Не забудьте, что использование event.key более предпочтительно, чем event.keyCode, так как оно более читаемо и современно.

Вы можете использовать следующий код, который не только отключает действие клавиши ESC, но также проверяет условия, при которых она была нажата, и в зависимости от ситуации выполняет или не выполняет действие.

В этом примере:

e.preventDefault();

отключает действие нажатия клавиши ESC.

Вы можете сделать что-то вроде скрытия div с помощью следующего кода:

document.getElementById('myDivId').style.display = 'none';

При этом также учитывается, что клавиша ESC была нажата:

(e.target.nodeName == 'BODY')

Вы можете удалить эту условную часть, если хотите, чтобы действие применялось ко всем элементам. Либо можете направить внимание только на INPUT, чтобы действие применялось только тогда, когда курсор находится в поле ввода.

Вот полный код:

window.addEventListener('keydown', function(e) {
    if ((e.key == 'Escape' || e.key == 'Esc' || e.keyCode == 27) && (e.target.nodeName == 'BODY')) {
        e.preventDefault();
        return false;
    }
}, true);

Этот код позволит вам управлять поведением клавиши ESC в зависимости от текущего контекста.

Лучший способ реализовать данную функциональность — создать функцию для этого.

ФУНКЦИЯ:

$.fn.escape = function (callback) {
    return this.each(function () {
        $(document).on("keydown", this, function (e) {
            var keycode = ((typeof e.keyCode != 'undefined' && e.keyCode) ? e.keyCode : e.which);
            if (keycode === 27) {
                callback.call(this, e);
            }
        });
    });
};

ПРИМЕР:

$("#my-div").escape(function () {
    alert('Escape!');
});

Объяснение: Данная функция добавляет обработчик события для нажатия клавиши Escape (код 27) на выбранном элементе. При нажатии Escape срабатывает переданный в функцию callback обработчик.