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

JavaScriptのキーボードイベントにおけるctrlKeyプロパティの役割とは？使い方を解説

ctrlKeyプロパティとは

JavaScriptのctrlKeyプロパティは、キーボードイベントが発生した瞬間に、ユーザーがCtrlキーを押しているかどうかを判定するためのプロパティです。キーが押されていればtrue、押されていなければfalseを返します。

このプロパティは、keydown、keyup、keypressなどのキーボードイベントオブジェクトで利用でき、「Ctrl + 特定のキー」のようなショートカット操作を実装する際に非常に役立ちます。

ctrlKeyプロパティの実装例

以下のコードを実行して、ctrlKeyプロパティの動作を確認してみましょう。テキストボックスで何かキーを押すと、Ctrlキーが押されているかどうかが画面に表示されます。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <input type = "text" onkeydown = "funcCtrlKey(event)">
      <div id = "res">Press any key</div>

      <script>
            function funcCtrlKey(event) {
            var val = document.getElementById("res");

            if (event.ctrlKey) {
               val.innerHTML = "CTRL key: Pressed";
            } else {
               val.innerHTML = "CTRL key: NOT Pressed";
            }
         }
      </script>
   </body>
   
</html>

コードの解説

このサンプルでは、テキスト入力欄にonkeydownイベントハンドラを設定し、キーが押されるたびにfuncCtrlKey関数が呼び出されます。関数内では、イベントオブジェクトのctrlKeyプロパティを参照し、その真偽値に応じて表示内容を切り替えています。

  • Ctrlキーが押されている場合：「CTRL key: Pressed」と表示される
  • Ctrlキーが押されていない場合：「CTRL key: NOT Pressed」と表示される

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

ctrlKeyと同様に、キーボードイベントオブジェクトには他の修飾キー（モディファイアキー）の状態を取得できるプロパティが用意されています。

  • altKey：Altキー（Optionキー）が押されているかどうか
  • shiftKey：Shiftキーが押されているかどうか
  • metaKey：WindowsキーやMacのCommandキーが押されているかどうか

これらのプロパティを組み合わせることで、「Ctrl + Shift + S」のような複数キーの同時押しを検出する高度なショートカット機能も簡単に実装できます。

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

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

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

    altKeyプロパティとはJavaScriptのaltKeyプロパティは、キーボードイベントが発生した瞬間にAltキー（MacではOptionキー）が押されていたかどうかを判定するためのプロパティです。このプロパティは真偽値（Boolean）を返します。true … イベント発生時にAltキーが押されていたfalse … Altキーは押されていなかった関連する修飾キーのプロパティaltKeyと同じ仕組みで、他の修飾キーの状態も取得できます。組み合わせて使うことで、より柔軟なキーボード操作の判定が可能になります。ctrlKey … Ctrlキーの状態shiftKey … Shiftキーの状態me