JS властивість Event.ctrlKey (Key)

Загальний опис

ctrlKey — це властивість об'єкта KeyboardEvent, яка повертає булеве значення, вказуючи, чи була натиснута клавіша "Ctrl" під час події клавіатури. Вона дозволяє перевіряти, чи користувач утримував клавішу "Ctrl" при натисканні іншої клавіші, що є корисним для створення комбінацій клавіш. Наприклад, "Ctrl + C" або "Ctrl + V" використовуються для копіювання і вставки, а ця властивість допомагає визначити подібні дії в вашому застосунку.

Це особливо корисно для реалізації гарячих клавіш або спеціальних функцій, які активуються тільки при натисканні клавіші "Ctrl". Властивість повертає true, якщо "Ctrl" натиснута, і false, якщо ні. Це дозволяє точно реагувати на комбінації клавіш, особливо коли потрібно розрізняти натискання окремої клавіші від її використання з "Ctrl". Для більшості сучасних браузерів ctrlKey працює бездоганно з подіями keydown, keyup і keypress.

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 'S') {
        console.log("Збереження заблоковано");
        event.preventDefault();
    }
});

Цей приклад блокує дію за замовчуванням для "Ctrl + S", яка зазвичай активує збереження в браузері. В залежності від ситуації, властивість ctrlKey можна використовувати у поєднанні з іншими властивостями, такими як altKey або shiftKey, щоб розширити набір можливих комбінацій.

правити

Порада

Пам'ятайте, що ctrlKey відображає стан клавіші "Ctrl" під час кожного натискання, тому ця властивість завжди змінюється з кожною новою подією клавіатури. Використовуйте її в логічних умовах для точного відстеження, коли натиснута комбінація.

автор: Bond правити

Порада

Переконайтеся, що комбінація, яку ви створюєте, не конфліктує з популярними браузерними або системними комбінаціями, щоб уникнути випадкової деактивації важливих функцій.

автор: Bond правити

Порада

Для запобігання виконання дій за замовчуванням, наприклад, "Ctrl + P" для друку, можна використовувати event.preventDefault() у парі з ctrlKey для блокування конкретних функцій, якщо ваш додаток має альтернативний функціонал.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.ctrlKey

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	1.2	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 'ArrowUp') {
        console.log("Переміщення вгору в документі");
    } else if (event.ctrlKey && event.key === 'ArrowDown') {
        console.log("Переміщення вниз в документі");
    }
});

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 'Z') {
        console.log("Відміна останньої дії");
    }
});