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 для збереження як.

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

Порада

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

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

Порада

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

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

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

Синтаксис

event.metaKey

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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