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

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

HTML DOM TouchEvent altKeyプロパティとは

HTML DOMのTouchEvent altKeyプロパティは、タッチイベントが発生した時点でAltキーが押されていたかどうかに対応するブール値（Boolean）を返します。このプロパティを利用することで、タッチ操作と同時に修飾キーが使われたかどうかを判定できます。

構文

ブール値（true / false）を返します。

touchEvent.altKey

ここで返される「booleanValue」には、以下のいずれかの値が設定されます。

booleanValue詳細
trueタッチイベント発生時にAltキーが押されていたことを示します
falseタッチイベント発生時にAltキーが押されていなかったことを示します

注：タッチイベントのサンプルコードは、モバイル端末やタッチ対応デバイスからアクセスしたオンラインHTMLエディタ上で実行しています。これは、「画面を2秒間タッチする」といった実際のタッチ操作を実行・確認できるようにするためです。

それでは、TouchEvent altKeyプロパティの具体的な使用例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent altKey</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    legend{
        border-color: #dc3545;
    }
    span {
        display: inline-block;
        width: 40px;
        height: 20px;
        margin: 1px;
        color: #fff;
        border: 3px solid black;
    }
    div span:nth-child(1){
        background-color: #FF8A00;
    }
    div span:nth-child(2){
        background-color: #F44336;
    }
    div span:nth-child(3){
        background-color: #03A9F4;
    }
    div span:nth-child(4){
        background-color: #4CAF50;
    }
</style>
</head>
<body>
    <form id="formSelect" ontouchstart="eventAction(event)">
        <fieldset>
           <legend>HTML-DOM-TouchEvent-altKey</legend>
           <label for="textSelect">Background Color Changer</label>
           <div><span>Alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
           <div id="divDisplay">No HotKey Pressed</div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var formSelect = document.getElementById("formSelect");
    function eventAction(event) {
        if(event.altKey){
            formSelect.style.backgroundColor = '#FF8A00';
            formSelect.style.color = '#FFF'
            divDisplay.textContent = 'Alt Key Pressed';
        }
    }
</script>
</body>
</html>

実行結果

タッチイベントが発生する前の表示 −

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

Altキーを押しながらタッチイベントを発生させた後の表示 −

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

このように、altKeyプロパティの戻り値を条件分岐に使うことで、Altキーが押されている場合のみ背景色を変更し、メッセージを表示する処理を実装できます。

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

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

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

    HTML DOM の TouchEvent metaKey プロパティは、タッチイベントが発生した時点で Meta キーが押されていたかどうかの状態を示すブール値（true / false）を返します。Mac の Command キーや Windows キーなどが Meta キーに該当します。 構文 metaKey プロパティは、以下のように記述することでブール値を取得できます。 touchEvent.metaKey 戻り値（booleanValue） booleanValue詳細 trueタッチイベントが発生したときに Meta キーが押されていたことを示します。 falseタッチイ