[JS] 押したキーを判断する（Shift, Ctrl, Alt対応）

JavaScript でキーボードで何のキーが押されたかを判断します。単独のキーだけでなく、Shift や Ctrl などの修飾キー同時押しも判別できます。動くサンプルはこちら。

キーボードを押すと onkeydown、離すと onkeyup のイベントが発生します。その時の値を表示してみます。 

let log = document.getElementById("log")
document.onkeydown = keyEvent
document.onkeyup = keyEvent
function keyEvent(event) {
    let message
    message = " | type: " + event.type
    message += " | key: " + event.key
    message += " | code: " + event.code;
    message += " | shiftKey: " + event.shiftKey;
    message += " | ctrlKey: " + event.ctrlKey;
    message += " | altKey: " + event.altKey;
    message += " | metaKey: " + event.metaKey;
    log.insertAdjacentHTML("afterbegin", "<div>"+message+"</div>");
}

keyCode という値を利用していることもありますが、現在では非推奨なので利用しません。
type は、keydown（押した）と、keyup（離した）を表します。
key と code は、入力された値を示しますが、code は修飾キー（shift,ctrlなど）の左右を判別できます。
shifKey, ctrlKey, altKey, metaKey は、修飾キーを同時押ししているかどうか判別できます。
metaKey は Windows では Windows キー、Mac では Command キーです。
altKey は Mac では Option キーです。
以下、全文です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>onkey</title>
</head>
<body>
<div>Please push key.</div>
<div id="log">
</div>
<script>
    let log = document.getElementById("log")
    document.onkeydown = keyEvent
    document.onkeyup = keyEvent

    function keyEvent(event) {
        let message
        message = " | type: " + event.type
        message += " | key: " + event.key
        message += " | code: " + event.code;
        message += " | shiftKey: " + event.shiftKey;
        message += " | ctrlKey: " + event.ctrlKey;
        message += " | altKey: " + event.altKey;
        message += " | metaKey: " + event.metaKey;
        log.insertAdjacentHTML("afterbegin", "<div>"+message+"</div>");
    }
</script>
</body>
</html>

JavaScriptJavaScript

Posted by kidatti