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, щоб розширити набір можливих комбінацій.
| Порада: | Пам'ятайте, що |
| Порада: | Переконайтеся, що комбінація, яку ви створюєте, не конфліктує з популярними браузерними або системними комбінаціями, щоб уникнути випадкової деактивації важливих функцій. |
| Порада: | Для запобігання виконання дій за замовчуванням, наприклад, "Ctrl + P" для друку, можна використовувати |
Синтаксис
event.ctrlKeyЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1.2 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі обробка комбінацій клавіш "Ctrl + S" та "Ctrl + R" дозволяє користувачеві зберегти введений текст у локальне сховище або скинути його, не використовуючи стандартні кнопки форми. Це зручно для демонстрації, як можна розширити функціонал форми за допомогою ctrlKey, полегшуючи роботу користувача зі сторінкою без необхідності перемикатися на інші елементи управління.
Цей приклад обробляє комбінацію "Ctrl + Z" для виконання функції скасування дії, яка часто використовується в текстових редакторах. Використовуючи ctrlKey, можна реалізувати скасування або відновлення дій на основі комбінацій клавіш.
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'Z') {
console.log("Відміна останньої дії");
}
});Цей код обробляє комбінації "Ctrl + ArrowUp" і "Ctrl + ArrowDown", що можуть бути використані для навігації по сторінці або в спеціальних вікнах. Це зручно для додатків з великою кількістю тексту або даних, де користувач може швидко переміщуватися за допомогою клавіатури.
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'ArrowUp') {
console.log("Переміщення вгору в документі");
} else if (event.ctrlKey && event.key === 'ArrowDown') {
console.log("Переміщення вниз в документі");
}
});