This small tutorial is going to demonstrate the way to create short cut keys on browser using jQuery.
In case of short cut, we need to bind key event with document. Working of binding and unbinding event is performed at loading time.
Following block of code demonstrate the same.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
// unbinding old event and binding new event
$(document).unbind("keydown").keydown(function(event) {
var e=e||event;
// get the key code according to browser.
var key_Code=e.keyCode||e.which||e.charCode;
// Check which keys have been pressed.
if(e.ctrlKey && String.fromCharCode(key_Code).toLowerCase() == 'f') {
e.returnValue = false;
e.keyCode = 0;
// To stop default working for this short cut...
e.preventDefault();
// To stop the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
e.stopPropagation();
$("#h1Id").html('Short cut key functionality is working ...');
$("#h1Id").css('color','red');
return false;
}
});
});
</script>
</head>
<body>
<center>
<p>This demo is to display working of short cut keys.</p>
<p style="font-weight: bold;">Press ctrl+f </p>
<h1 id="h1Id"></h1>
</center>
</body>
</html>
When we execute this code and press ctrl+f. It will display that short-cut is working properly.
Output:-
