Detect SHIFT, ALT, CTRL & character key example


This is live javascript example of keyboard key detection.
Press different combinations of SHIFT, CTRL, ALT, numbers and letters on your keyboard, and see results bellow.

Report:




Bellow is javascript keyboard detection code used:


        document.onkeydown = KeyDownHandler;

        document.onkeyup = KeyUpHandler;

       

        var CTRL = false;      

        var SHIFT = false;     

        var ALT = false;

        var CHAR_CODE = -1;

       

        function KeyDownHandler(e)

        {

            var x = '';

            if (document.all)

            {

                var evnt = window.event;

                x = evnt.keyCode;

            }

            else

            {

                x = e.keyCode;

            }

            DetectKeys(x, true);

            ShowReport();

        }

       

        function KeyUpHandler(e)

        {

            var x = '';

            if (document.all)

            {

                var evnt = window.event;

                x = evnt.keyCode;

            }

            else

            {

                x = e.keyCode;

            }

            DetectKeys(x, false);

            ShowReport();

        }

       

        function DetectKeys(KeyCode, IsKeyDown)

        {           

            if (KeyCode == '16')

            {

                SHIFT = IsKeyDown;

            }

            else if (KeyCode == '17')

            {

                CTRL = IsKeyDown;

            }

            else if (KeyCode == '18')

            {

                ALT = IsKeyDown;

            }

            else

            {

                if(IsKeyDown)

                    CHAR_CODE = KeyCode;

                else

                    CHAR_CODE = -1;

            }

     }

        

     function ShowReport()

     {

        var TBReport = document.getElementById("tbReport");

        var DIVCtrl = document.getElementById("IsCtrl");

        var DIVShift = document.getElementById("IsShift");

        var DIVAlt = document.getElementById("IsAlt");

        var DIVChar = document.getElementById("IsChar");

 

        document.title = 'SHIFT: ' + SHIFT + ', CTRL: ' + CTRL + ', ALT: ' + ALT + ', Char code is: ' + CHAR_CODE;

        TBReport.value = document.title;            

           

        if(SHIFT)

            DIVShift.style.visibility = "visible";

        else

            DIVShift.style.visibility = "hidden";

               

        if(ALT)

            DIVAlt.style.visibility = "visible";

        else

            DIVAlt.style.visibility = "hidden";

            

        if(CTRL)

            DIVCtrl.style.visibility = "visible";

        else

            DIVCtrl.style.visibility = "hidden";

     }



Outsource your next project: