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

【JavaScript】キーボードイベントのaltKeyプロパティとは？役割と使い方を解説

altKeyプロパティとは

JavaScriptのaltKeyプロパティは、キーボードイベントが発生した瞬間にAltキー（MacではOptionキー）が押されていたかどうかを判定するためのプロパティです。

このプロパティは真偽値（Boolean）を返します。

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

関連する修飾キーのプロパティ

altKeyと同じ仕組みで、他の修飾キーの状態も取得できます。組み合わせて使うことで、より柔軟なキーボード操作の判定が可能になります。

  • ctrlKey … Ctrlキーの状態
  • shiftKey … Shiftキーの状態
  • metaKey … Metaキー（WindowsキーやCommandキー）の状態

サンプルコード

次のコードを実行すると、キー入力のたびにAltキーが押されているかどうかを画面に表示できます。

<!DOCTYPE html>
<html>
  <body>
    <input type="text" onkeydown="funcAltKey(event)">
    <div id="res">何かキーを押してください</div>
    <script>
      function funcAltKey(event) {
        var val = document.getElementById("res");

        if (event.altKey) {
          val.innerHTML = "ALTキー：押されています";
        } else {
          val.innerHTML = "ALTキー：押されていません";
        }
      }
    </script>
  </body>
</html>

動作のポイント

テキストボックス内で任意のキーを押すと、onkeydownイベントが発生し、funcAltKey関数が呼び出されます。関数内ではevent.altKeyの値を条件分岐で判定し、結果をdiv要素に出力しています。

Altキーを押しながら別のキーを入力すれば「押されています」と表示され、Altキーなしで入力すれば「押されていません」と表示されます。ショートカットキーの実装や、特定のキー組み合わせの検出などに活用できる基本的かつ重要なプロパティです。

  1. JavaScriptにおけるscreenYマウスイベントの役割とは？

    JavaScriptにおいて、screenYマウスイベントプロパティは、イベントが発生した際のマウスポインタの垂直方向（Y軸）の座標を返します。 この値は、画面（モニター）の左上を原点とした絶対的な座標として取得されるため、ブラウザウィンドウの位置に関係なく、画面全体の中でのポインタ位置を知ることができます。なお、水平方向の座標を取得したい場合は、同じく用意されている screenX プロパティを使用します。 screenYの主な特徴 マウスポインタの垂直座標（Y座標）をピクセル単位で返す 画面の左上を基準点（0, 0）とする clientY とは異なり、ブラウザの表示領域ではなく画面全体が

  2. JavaScriptのscreenXマウスイベントとは？役割と使い方を実例で解説

    マウスイベントが発生したとき、screenXプロパティは、画面（スクリーン）の左上を基準としたマウスポインタのX座標（水平方向の位置）をピクセル単位で返します。 screenXとscreenYの基本的な役割 イベントオブジェクトが持つscreenXは水平方向（X座標）、screenYは垂直方向（Y座標）を表します。この2つはブラウザウィンドウやWebページではなく、ユーザーの物理的な画面全体を基準にした座標を返す点が大きな特徴です。 似た用途の座標プロパティと比較すると、違いがより明確になります。 screenX / screenY：モニター画面全体を基準とした座標 clientX / cl