css.in.ua
Підтримати

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

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

metaKey — це властивість об’єкта KeyboardEvent, яка повертає булеве значення true або false, вказуючи, чи була натиснута клавіша Meta під час події клавіатури. На Mac це відповідає клавіші Cmd, а на Windows — клавіші Win. Це дозволяє вам відстежувати натискання Meta у комбінації з іншими клавішами, що робить можливим створення спеціальних комбінацій клавіш, особливо на платформах Apple.

Наприклад, якщо користувач натискає Cmd + S на Mac для збереження, можна перевірити значення metaKey, щоб визначити, чи була натиснута саме клавіша Cmd як частина цієї комбінації. Значення metaKey поверне true, якщо під час натискання будь-якої клавіші була також натиснута клавіша Meta. Це значно розширює можливості для створення кастомних гарячих клавіш, особливо для Mac-користувачів, які часто використовують Cmd у поєднанні з іншими клавішами.

document.addEventListener('keydown', (event) => {
  if (event.metaKey && event.key === 's') {
    console.log('Meta + S натиснуто');
    event.preventDefault();
  }
});

У цьому прикладі комбінація Meta + S перехоплюється, і якщо вона натиснута, то подія запобігає стандартній дії за допомогою event.preventDefault(). Це може бути корисним, наприклад, для реалізації функцій збереження або швидкого доступу.

Властивість metaKey є частиною подій keydown, keypress, і keyup, що дозволяє реалізувати обробку подій у реальному часі. На платформах Mac metaKey є основною модифікаторною клавішею, тому важливо враховувати це при розробці кросплатформених додатків, щоб уникнути плутанини з Ctrl.

Порада:

metaKey можна поєднувати з іншими модифікаторами, як-от shiftKey або ctrlKey, для створення складніших комбінацій. Це дозволяє користувачеві активувати різні функції, наприклад, Cmd + Shift + S для збереження як.
Порада:

Враховуйте, що metaKey в основному використовується для веб-додатків, які розроблені для Mac. Наприклад, у текстових редакторах можна використовувати metaKey для керування функціями редагування.
Порада:

Оскільки metaKey не підтримується однаково на всіх платформах, перевірте його на підтримку у вашій цільовій аудиторії, щоб забезпечити повноцінний досвід для користувачів Windows і Mac.

Синтаксис

event.metaKey

Значення

Return

Переглядачі

Переглядач

1

1.5

1.2

12.1

12
Переглядач

37

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі, користувач може ввести текст у поле та натиснути комбінацію Meta + Enter для збереження тексту, який потім відображається під полем введення. Якщо користувач натискає Meta + Backspace, текстове поле та збережений текст очищуються. Це чудово підходить для інтерактивних додатків, де користувачі можуть швидко зберігати або очищувати введені дані за допомогою клавіатури.

Тут використовується складна комбінація Meta + Shift + Z для скасування дій. Така комбінація дозволяє реалізувати функції, схожі на Cmd + Shift + Z у редакторах для Mac, що використовується для скасування змін. Це дуже корисно для програм з функціями редагування.

document.addEventListener('keydown', (event) => {
  if (event.metaKey && event.shiftKey && event.key === 'z') {
    console.log('Скасування всіх змін за допомогою Meta + Shift + Z');
    // Логіка скасування дій
  }
});

Цей приклад демонструє, як можна використовувати комбінацію Meta + Enter, що може бути корисним для миттєвого виконання дій, наприклад, підтвердження команди в командному рядку або запуску команди в текстовому редакторі.

document.addEventListener('keydown', (event) => {
  if (event.metaKey && event.key === 'Enter') {
    console.log('Виконання команди Meta + Enter');
    // Логіка виконання команди
  }
});

Спільнота

Зв'язок