ctrlKey, altKey, shiftKey, metaKey property tutorial in JavaScript

October 14, 2024
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ctrlKey shiftKey altKey metaKey property JavaScript</title>
    <link rel="stylesheet" href="css/ctrlKey_shiftKey_altKey_metaKey_property_JavaScript.css">
</head>

<body>
    <div id="box"></div>
    <input type="text" id="mytextbox">
    <script>
        //"ctrlKey", "shiftKey", "altKey", "metaKey" property works with mouse Events as well as Keyboard Events
        var target = document.querySelector("#box");
        target.addEventListener("click", function (e) {
            console.clear();
            //Control Key
            // var ctrl = e.ctrlKey;   //ctrlKey propety returns boolean value true OR false
            // if(ctrl) {
            //     console.log("You Pressed Control Key.");
            // }
            // else{
            //     console.log("You not Pressed Control Key.");
            // }

            // //Shift Key
            // var shift = e.shiftKey;
            // if(shift) {
            //     console.log("You Pressed Shift Key.");
            // }
            // else {
            //     console.log("You not Pressed Shift Key.");
            // }

            // //Alter Key
            // var alt = e.altKey;
            // if(alt) {
            //     console.log("You Pressed Alter Key.");
            // }
            // else {
            //     console.log("You not Pressed Alter Key.");
            // }

            // //Meta Key OR Window Key
            // var meta = e.metaKey;
            // if(meta) {
            //     console.log("You Pressed Meta Key.");
            // }
            // else {
            //     console.log("You not Pressed Meta Key.");
            // }


            //Using switch Case Above Operation is performed as shown below :
            var k;
            switch (true) {
                case e.metaKey:
                    k = "Meta Key is Pressed";
                    break;
                case e.altKey:
                    k = "Alter Key is Pressed";
                    break;
                case e.ctrlKey:
                    k = "Control Key is Pressed";
                    break;
                case e.shiftKey:
                    k = "Shift Key is Pressed";
                    break;
                default:
                    k = "No Key Pressed";
                    break;
            }
            console.log(k);
        });


        //Below is for Keyboard Events
        var targetTwo = document.querySelector("#mytextbox");
        targetTwo.addEventListener("keydown", function (e) {
            console.clear();
            var key;

            switch (true) {
                case e.metaKey:
                    key = "Meta Key is Pressed";
                    break;
                case e.altKey:
                    key = "Alter Key is Pressed";
                    break;
                case e.ctrlKey:
                    key = "Control Key is Pressed";
                    break;
                case e.shiftKey:
                    key = "Shift Key is Pressed";
                    break;
                default:
                    key = "No Key Pressed";
                    break;
            }
            console.log(key);
        });
    </script>
</body>

</html>




Below File is ctrlKey_shiftKey_altKey_metaKey_property_JavaScript.css File
#box {
    width: 400px;
    height: 300px;
    border: 1px solid #000000;
    background: #ffc0cb;
    margin: 20px;
}