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.
HTML Java Script CSS:
To implement this we need to write the code like as shown below
<!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>
<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>
No comments:
Post a Comment