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

JavaScriptのキーボードイベントにおけるshiftKeyプロパティの役割と使い方

JavaScriptのshiftKeyプロパティは、キーボードイベントが発生した瞬間に、ユーザーがShiftキーを押しているかどうかを判定するためのプロパティです。

このプロパティは真偽値（Boolean）を返します。キーボードイベント（keydown、keyup、keypressなど）がトリガーされたときにShiftキーが押されていれば true、押されていなければ false を返します。同様のプロパティとして、Ctrlキーを判定する ctrlKey、Altキーを判定する altKey、Metaキーを判定する metaKey などもあります。

shiftKeyプロパティの実装例

以下のコードを実行すると、shiftKeyプロパティの動作を実際に確認できます。テキスト入力欄で何らかのキーを押すと、その時点でShiftキーが押されているかどうかが画面に表示されます。

<!DOCTYPE html>
<html>
   <body>
      <input type = "text" onkeydown = "funcShiftKey(event)">
      <div id = "res">Press any key</div>
      <script>
         function funcShiftKey(event) {
            var val = document.getElementById("res");
            if (event.shiftKey) {
               val.innerHTML = "SHIFT key: Pressed";
            } else {
               val.innerHTML = "SHIFT key: NOT Pressed";
            }
         }
      </script>
   </body>
</html>

コードの解説

このサンプルコードの仕組みは以下の通りです。

  • onkeydown属性： テキスト入力欄（<input>）にキーが押されるたびに、funcShiftKey(event) 関数が呼び出されます。引数の event には発生したキーボードイベントの情報が格納されています。
  • event.shiftKey の判定： イベントオブジェクトの shiftKey プロパティを参照し、Shiftキーの状態を取得します。
  • 結果の表示： Shiftキーが押されていれば「SHIFT key: Pressed」、押されていなければ「SHIFT key: NOT Pressed」というテキストが、id="res" のdiv要素内に表示されます。

活用シーン

shiftKeyプロパティは、次のような場面で役立ちます。

  • Shift + キーの組み合わせによるショートカット機能の実装
  • 表計算アプリのように、Shiftキーを押しながらの範囲選択処理の実装
  • 大文字・小文字や記号入力の挙動を細かく制御したい場合の判定処理

このように、shiftKeyプロパティを使えば、修飾キーの状態に応じた柔軟なキーボード操作を実現できます。

  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