HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM KeyboardEventのmetaKeyプロパティとは？構文と実装例をわかりやすく解説

HTML DOMのKeyboardEvent metaKeyプロパティは、キーボードイベントが発生した時点でMetaキーが押されていたかどうかを、真偽値（true / false）で返すプロパティです。

なお、Metaキーは環境によって対応するキーが異なり、Windowsでは「Windowsキー」、Macでは「Command（⌘）キー」に該当します。ユーザーが修飾キーを組み合わせた操作を行ったかどうかを判定したい場合に便利です。

構文

metaKeyプロパティの値を取得するには、以下のように記述します。

event.metaKey
  • 戻り値： イベント発生時にMetaキーが押されていれば true、押されていなければ false

サンプルコード

ここでは、テキスト入力欄でキーが押されるたびにmetaKeyプロパティの値をチェックし、表示メッセージを切り替える簡単な例を紹介します。

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent metaKey</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent-metaKey</legend>
<label>Editor:
<input type="text" id="textSelect" onkeydown="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay">I Dare you to press the meta key</div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function getEventData(InputEvent) {
        if(InputEvent.metaKey === true)
            divDisplay.textContent = 'You are very brave!';
        else
            divDisplay.textContent = 'You scared enough?';
    }
</script>
</body>
</html>

コードのポイント

  • テキスト入力欄に onkeydown イベントを設定し、キーが押されるたびに関数 getEventData() を呼び出しています。
  • 関数内では InputEvent.metaKey === true の比較により、Metaキーが同時に押されたかどうかを厳密に判定しています。
  • 判定結果に応じて、divDisplay のテキスト内容を書き換えています。

実行結果

このコードを実行すると、以下のような動作になります。

テキストフィールドに入力する前の初期状態 −

HTML DOM KeyboardEventのmetaKeyプロパティとは？構文と実装例をわかりやすく解説

Metaキーを押さずに入力した場合 −

HTML DOM KeyboardEventのmetaKeyプロパティとは？構文と実装例をわかりやすく解説

Metaキーを押しながら入力した場合 −

HTML DOM KeyboardEventのmetaKeyプロパティとは？構文と実装例をわかりやすく解説

まとめ

metaKeyプロパティを使えば、キーボードイベント時にMetaキー（WindowsキーやCommandキー）との組み合わせ操作が行われたかどうかを簡単に判定できます。ctrlKeyやshiftKey、altKeyなどの他の修飾キー用プロパティと併用することで、より柔軟なキーボード操作のハンドリングが可能になります。

  1. HTML DOM TouchEventのmetaKeyプロパティとは？使い方とサンプルコードを解説

    HTML DOM の TouchEvent metaKey プロパティは、タッチイベントが発生した時点で Meta キーが押されていたかどうかの状態を示すブール値（true / false）を返します。Mac の Command キーや Windows キーなどが Meta キーに該当します。 構文 metaKey プロパティは、以下のように記述することでブール値を取得できます。 touchEvent.metaKey 戻り値（booleanValue） booleanValue詳細 trueタッチイベントが発生したときに Meta キーが押されていたことを示します。 falseタッチイ

  2. HTML DOM Video textTracksプロパティの使い方をわかりやすく解説

    HTML DOM の Video textTracks プロパティは、<video> 要素に関連付けられたテキストトラック（字幕やキャプションなど）の情報を格納した TextTrackList オブジェクトを返します。このプロパティを利用すると、JavaScript から動画に設定された字幕トラックの総数やラベル、言語などの情報を簡単に取得できます。 構文 textTracks プロパティの基本的な構文は以下の通りです。 mediaObject.textTracks 戻り値は TextTrackList オブジェクトであり、length プロパティでトラックの総数を取得したり、イン