Adding keyboard shortcuts to your web application

Introduction:
This article explain you to how to use key board keys as shortcut keys in your webapplication.
Description:
 Using below JavaScript you can add an event listener to a keyboard action, such as 'onkeydown' and 'onkeyup'  which will trigger your custom code to run and also pass along information related to the event.
To implement this we need to write the code like as shown below
HTML Java Script CSS:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
  
</head>
<body>
    <div style="width:50%;margin:auto;padding:20PX;">
        <strong>Apply short cut keys in webApplication.</strong>
        <div>Some examples to demonstrate the shortcut keys in web application using simple javascript</div>

        <div>1. Press Ctrl+Z</div>

        <div>2. Press Ctrl+X</div>

        <div>3. Press Ctrl+I</div>

        <div>4. Press Ctrl+P</div>

        <div>5. Press Ctrl+M</div>

        <div>5. Press Ctrl+N</div>




    </div>
</body>
</html>
JavaScript
 <script type="text/javascript">
        var key;
        onkeydown = function (e) {
            if (e.keyCode == 17) { key = 'CTRL'; }
            if (key == 'CTRL' && e.keyCode == 90) { e.preventDefault(); alert('You press CTRL+Z') }//CTRL+Z ----NEW
            if (key == 'CTRL' && e.keyCode == 88) { e.preventDefault(); alert('You press CTRL+X') }//CTRL+X ----SAVE
            if (key == 'CTRL' && e.keyCode == 81) { e.preventDefault(); alert('You press CTRL+Q') }//Z+C Cancel
            if (key == 'CTRL' && e.keyCode == 73) { e.preventDefault(); alert('You press CTRL+I') }//CTRL+I Save
            if (key == 'CTRL' && e.keyCode == 77) { e.preventDefault(); alert('You press CTRL+M') }
            if (key == 'CTRL' && e.keyCode == 78) { e.preventDefault(); alert('You press CTRL+N') }

        }
        onkeyup = function (e) { key = ''; }

    </script>
DEMO
shortcutkeys

Blogger Tips and TricksLatest Tips And TricksBlogger Tricks