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

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

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

Приклади

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

<header>
  <h2 class="title">KeyboardEvent -> metaKey</h2>
  <p class="description">Перевіряє, чи була натиснута клавіша Meta під час події клавіатури.</p>
</header>
<main>
  <div class="result">
    <input type="text" id="inputField" placeholder="Введіть текст тут..." />
    <p id="output">Збережений текст: <span id="savedText">поки що порожньо</span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 15px;
}

#output {
  font-weight: bold;
  color: #333;
}

#savedText {
  font-style: italic;
}

const inputField = document.getElementById('inputField');
const savedText = document.getElementById('savedText');

inputField.addEventListener('keydown', event => {
  if (event.metaKey && event.key === 'Enter') {
    savedText.textContent = inputField.value;
    inputField.value = '';
    console.log('Текст збережено!');
  } else if (event.metaKey && event.key === 'Backspace') {
    inputField.value = '';
    savedText.textContent = 'поки що порожньо';
    console.log('Поле очищено!');
  }
});
//# sourceURL=pen.js

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');
    // Логіка виконання команди
  }
});