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

HTML DOM KeyboardEventのshiftKeyプロパティとは？使い方とサンプルコードを解説

HTML DOM の KeyboardEvent オブジェクトにおける shiftKey プロパティは、イベントが発生した時点でユーザーが Shift キーを押していたかどうかを示すブール値（true / false）を返します。キーボード操作に応じた動的な処理を実装したい場合に役立つプロパティです。

構文（シンタックス）

shiftKey プロパティの基本的な構文は以下の通りです。

ブール値を取得する場合

event.shiftKey

Shift キーが押されていれば true、押されていなければ false が返されます。

サンプルコード

それでは、KeyboardEvent shiftKey プロパティを使った具体的な例を見てみましょう。テキスト入力欄でキーが押された際に、Shift キーの状態を判定してメッセージを切り替えるシンプルなデモです。

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent shiftKey</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-shiftKey</legend>
<label>Editor:
<input type="text" id="textSelect" onkeydown="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay">I Dare you to press the shift key</div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   function getEventData(InputEvent) {
   if(InputEvent.shiftKey === true)
      divDisplay.textContent = 'You are very brave!';
   else
      divDisplay.textContent = 'You scared enough?';
   }
</script>
</body>
</html>

コードのポイント

  • テキスト入力欄に onkeydown イベントハンドラを設定し、キーが押されるたびに getEventData(event) 関数を呼び出しています。
  • 関数内では InputEvent.shiftKey === true という条件式で、Shift キーが押されているかどうかを厳密に判定しています。
  • 判定結果に応じて、divDisplay 要素のテキスト内容が書き換えられます。

実行結果

上記のコードをブラウザで開くと、次のように動作します。

テキストフィールドに何も入力していない初期状態の表示：

HTML DOM KeyboardEventのshiftKeyプロパティとは？使い方とサンプルコードを解説

Shift キーを押しながら入力した場合の表示：

HTML DOM KeyboardEventのshiftKeyプロパティとは？使い方とサンプルコードを解説

Shift キーを押さずに入力した場合の表示：

HTML DOM KeyboardEventのshiftKeyプロパティとは？使い方とサンプルコードを解説

まとめ

shiftKey プロパティは、keydown・keyup・keypress などのキーボードイベントと組み合わせて使用することで、Shift キーの押下状態を簡単に検出できます。同様のプロパティとして Ctrl キーを判定する ctrlKey、Alt キーを判定する altKey、Meta キーを判定する metaKey なども用意されており、これらを組み合わせることでより高度なキーボード操作の制御が可能になります。

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

    HTML DOM TouchEvent の shiftKey プロパティは、タッチイベントが発生した時点で Shift キーが押されていたかどうかに対応するブール値（Boolean）を返すプロパティです。 構文 ブール値（true / false）を返します。 touchEvent.shiftKey ここで返される booleanValue は以下のいずれかになります。 booleanValue詳細 trueタッチイベントが発生したときに Shift キーが押されていたことを示します falseタッチイベントが発生したときに Shift キーは押されていなかったことを示します 注意

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

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