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

HTML DOM KeyboardEventのaltKeyプロパティとは？ALTキー押下状態の判定方法を解説

HTML DOMのKeyboardEvent altKeyプロパティは、HTMLドキュメント上でキーイベントが発生したときに、Alt（ALT）キーが押されていたかどうかを判定するためのプロパティです。

このプロパティは読み取り専用で、戻り値として以下のブール値（真偽値）を返します。

  • true：キーイベント発生時にAltキーが押されていた場合
  • false：Altキーが押されていなかった場合

なお、Mac環境ではOptionキーがAltキーに相当します。また、類似の修飾キー判定プロパティとして、Ctrlキーを判定する「ctrlKey」、Shiftキーを判定する「shiftKey」、Metaキー（WindowsキーやCommandキー）を判定する「metaKey」なども用意されています。

構文（Syntax）

altKeyプロパティの基本的な構文は次のとおりです。

event.altKey

altKeyプロパティの使用例

ここでは、テキスト入力欄でキーを押した際に、そのキーイベントでAltキーが押されているかどうかを判定し、結果を画面に表示するサンプルコードを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
    input {
        border: 2px solid #fff;
        padding: 8px;
        background: transparent;
        width: 310px;
        border-radius: 20px;
        outline: none;
    }
    ::placeholder {
        color: #000;
    }
    .show {
        font-size: 1.2rem;
        color: #fff;
    }
</style>
<body>
<h1>HTML KeyboardEvent altKey Property Demo</h1>
<input type="text" placeholder="Enter your message" onkeydown="display(event)">
<div class="show">
</div>
<script>
    function display(event) {
        if (event.altKey) {
            document.querySelector(".show").innerHTML = "Altキーを押しながら「" + event.key + "」キーが入力されました";
        } else {
            document.querySelector(".show").innerHTML = "「" + event.key + "」キーが入力されました";
        }
    }
</script>
</body>
</html>

出力結果

このコードを実行すると、テキストフィールド付きの画面が表示されます。

HTML DOM KeyboardEventのaltKeyプロパティとは？ALTキー押下状態の判定方法を解説

テキストフィールド内で任意のキーを押してみてください。通常どおりキーを押した場合は押されたキーの名前だけが表示されますが、Altキーを押しながら別のキーを入力すると、altKeyプロパティが「true」を返し、Altキーとの同時押しが検出される様子を確認できます。

HTML DOM KeyboardEventのaltKeyプロパティとは？ALTキー押下状態の判定方法を解説

まとめ

KeyboardEventのaltKeyプロパティを使えば、ユーザーがAltキーを組み合わせた操作を行ったかどうかを簡単に判別できます。ショートカットキーの実装や、特定のキー操作に応じた処理を分岐させたい場合に非常に便利なプロパティなので、ぜひ活用してみてください。

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

    TouchEvent touchesプロパティとはHTML DOMのTouchEventにおけるtouchesプロパティは、タッチ面（タッチスクリーンなど）上で発生したすべての接触ポイント（コンタクトポイント）のリストに対応するTouchListオブジェクトを返します。注意：指定されたノード、またはその子ノード上でタッチが発生した場合、その後に続くタッチ操作は、同じノード上で発生していなくてもカウント対象になります。構文TouchListオブジェクトを取得するための構文は以下の通りです。event.touches補足：本記事のタッチイベントのサンプルコードは、モバイル端末やタッチ操作対応デバイ

  2. HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説

    HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種