I want to handle F1-F12 keys using JavaScript and jQuery.
I am not sure what pitfalls there are to avoid, and I am not currently able to test implementations in any other browsers than Internet Explorer 8, Google Chrome and Mozilla FireFox 3.
Any suggestions to a full cross-browser solution? Something like a well-tested jQuery library or maybe just vanilla jQuery/JavaScript?
This question is related to
javascript
jquery
events
keyboard
keyboard-events
One of the problems in trapping the F1-F12 keys is that the default function must also be overridden. Here is an example of an implementation of the F1 'Help' key, with the override that prevents the default help pop-up. This solution can be extended for the F2-F12 keys. Also, this example purposely does not capture combination keys, but this can be altered as well.
<html>
<head>
<!-- Note: reference your JQuery library here -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h1>F-key trap example</h1>
<div><h2>Example: Press the 'F1' key to open help</h2></div>
<script type="text/javascript">
//uncomment to prevent on startup
//removeDefaultFunction();
/** Prevents the default function such as the help pop-up **/
function removeDefaultFunction()
{
window.onhelp = function () { return false; }
}
/** use keydown event and trap only the F-key,
but not combinations with SHIFT/CTRL/ALT **/
$(window).bind('keydown', function(e) {
//This is the F1 key code, but NOT with SHIFT/CTRL/ALT
var keyCode = e.keyCode || e.which;
if((keyCode == 112 || e.key == 'F1') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Open help window here instead of alert
alert('F1 Help key opened, ' + keyCode);
}
// Add other F-keys here:
else if((keyCode == 113 || e.key == 'F2') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Do something else for F2
alert('F2 key opened, ' + keyCode);
}
});
</script>
</body>
</html>
I borrowed a similar solution from a related SO article in developing this. Let me know if this worked for you as well.
You can do this with jquery like this:
$("#elemenId").keydown(function (e) {
if(e.key == "F12"){
console.log(e.key);
}
});
I am not sure if intercepting function keys is possible, but I would avoid using function keys all together. Function keys are used by browsers to perform a variety of tasks, some of them quite common. For example, in Firefox on Linux, at least six or seven of the function keys are reserved for use by the browser:
The worst part is that different browsers on different operating systems use different keys for different things. That's a lot of differences to account for. You should stick to safer, less commonly used key combinations.
This works for me.
if(code ==112) {
alert("F1 was pressed!!");
return false;
}
F2 - 113, F3 - 114, F4 - 115, and so fort.
When you use angular.js for handling events, you should use ng-keydown for preventing pause in developer in chrome.
I am not sure if intercepting function keys is possible, but I would avoid using function keys all together. Function keys are used by browsers to perform a variety of tasks, some of them quite common. For example, in Firefox on Linux, at least six or seven of the function keys are reserved for use by the browser:
The worst part is that different browsers on different operating systems use different keys for different things. That's a lot of differences to account for. You should stick to safer, less commonly used key combinations.
Solution in ES6 for modern browsers and IE11 (with transpilation to ES5):
//Disable default IE help popup
window.onhelp = function() {
return false;
};
window.onkeydown = evt => {
switch (evt.keyCode) {
//ESC
case 27:
this.onEsc();
break;
//F1
case 112:
this.onF1();
break;
//Fallback to default browser behaviour
default:
return true;
}
//Returning false overrides default browser event
return false;
};
I agree with William that in general it is a bad idea to hijack the function keys. That said, I found the shortcut library that adds this functionality, as well as other keyboard shortcuts and combination, in a very slick way.
Single keystroke:
shortcut.add("F1", function() {
alert("F1 pressed");
});
Combination of keystrokes:
shortcut.add("Ctrl+Shift+A", function() {
alert("Ctrl Shift A pressed");
});
This works for me.
if(code ==112) {
alert("F1 was pressed!!");
return false;
}
F2 - 113, F3 - 114, F4 - 115, and so fort.
I agree with William that in general it is a bad idea to hijack the function keys. That said, I found the shortcut library that adds this functionality, as well as other keyboard shortcuts and combination, in a very slick way.
Single keystroke:
shortcut.add("F1", function() {
alert("F1 pressed");
});
Combination of keystrokes:
shortcut.add("Ctrl+Shift+A", function() {
alert("Ctrl Shift A pressed");
});
Without other external class you can create your personal hack code simply using
event.keyCode
Another help for all, I think is this test page for intercept the keyCode (simply copy and past in new file.html for testing your event).
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td,th{border:2px solid #aaa;}
</style>
<script type="text/javascript">
var t_cel,tc_ln;
if(document.addEventListener){ //code for Moz
document.addEventListener("keydown",keyCapt,false);
document.addEventListener("keyup",keyCapt,false);
document.addEventListener("keypress",keyCapt,false);
}else{
document.attachEvent("onkeydown",keyCapt); //code for IE
document.attachEvent("onkeyup",keyCapt);
document.attachEvent("onkeypress",keyCapt);
}
function keyCapt(e){
if(typeof window.event!="undefined"){
e=window.event;//code for IE
}
if(e.type=="keydown"){
t_cel[0].innerHTML=e.keyCode;
t_cel[3].innerHTML=e.charCode;
}else if(e.type=="keyup"){
t_cel[1].innerHTML=e.keyCode;
t_cel[4].innerHTML=e.charCode;
}else if(e.type=="keypress"){
t_cel[2].innerHTML=e.keyCode;
t_cel[5].innerHTML=e.charCode;
}
}
window.onload=function(){
t_cel=document.getElementById("tblOne").getElementsByTagName("td");
tc_ln=t_cel.length;
}
</script>
</head>
<body>
<table id="tblOne">
<tr>
<th style="border:none;"></th><th>onkeydown</th><th>onkeyup</th><th>onkeypress</td>
</tr>
<tr>
<th>keyCode</th><td> </td><td> </td><td> </td>
</tr>
<tr>
<th>charCode</th><td> </td><td> </td><td> </td>
</tr>
</table>
<button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML=' '};">CLEAR</button>
</body>
</html>
Here is a working demo so you can try it right here:
var t_cel, tc_ln;_x000D_
if (document.addEventListener) { //code for Moz_x000D_
document.addEventListener("keydown", keyCapt, false);_x000D_
document.addEventListener("keyup", keyCapt, false);_x000D_
document.addEventListener("keypress", keyCapt, false);_x000D_
} else {_x000D_
document.attachEvent("onkeydown", keyCapt); //code for IE_x000D_
document.attachEvent("onkeyup", keyCapt);_x000D_
document.attachEvent("onkeypress", keyCapt);_x000D_
}_x000D_
_x000D_
function keyCapt(e) {_x000D_
if (typeof window.event != "undefined") {_x000D_
e = window.event; //code for IE_x000D_
}_x000D_
if (e.type == "keydown") {_x000D_
t_cel[0].innerHTML = e.keyCode;_x000D_
t_cel[3].innerHTML = e.charCode;_x000D_
} else if (e.type == "keyup") {_x000D_
t_cel[1].innerHTML = e.keyCode;_x000D_
t_cel[4].innerHTML = e.charCode;_x000D_
} else if (e.type == "keypress") {_x000D_
t_cel[2].innerHTML = e.keyCode;_x000D_
t_cel[5].innerHTML = e.charCode;_x000D_
}_x000D_
}_x000D_
window.onload = function() {_x000D_
t_cel = document.getElementById("tblOne").getElementsByTagName("td");_x000D_
tc_ln = t_cel.length;_x000D_
}td,_x000D_
th {_x000D_
border: 2px solid #aaa;_x000D_
}<html>_x000D_
_x000D_
<head>_x000D_
<title>Untitled</title>_x000D_
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<table id="tblOne">_x000D_
<tr>_x000D_
<th style="border:none;"></th>_x000D_
<th>onkeydown</th>_x000D_
<th>onkeyup</th>_x000D_
<th>onkeypress</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th>keyCode</th>_x000D_
<td> </td>_x000D_
<td> </td>_x000D_
<td> </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th>charCode</th>_x000D_
<td> </td>_x000D_
<td> </td>_x000D_
<td> </td>_x000D_
</tr>_x000D_
</table>_x000D_
<button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML=' '};">CLEAR</button>_x000D_
</body>_x000D_
_x000D_
</html>I am not sure if intercepting function keys is possible, but I would avoid using function keys all together. Function keys are used by browsers to perform a variety of tasks, some of them quite common. For example, in Firefox on Linux, at least six or seven of the function keys are reserved for use by the browser:
The worst part is that different browsers on different operating systems use different keys for different things. That's a lot of differences to account for. You should stick to safer, less commonly used key combinations.
Add a shortcut:
$.Shortcuts.add({
type: 'down',
mask: 'Ctrl+A',
handler: function() {
debug('Ctrl+A');
}
});
Start reacting to shortcuts:
$.Shortcuts.start();
Add a shortcut to “another” list:
$.Shortcuts.add({
type: 'hold',
mask: 'Shift+Up',
handler: function() {
debug('Shift+Up');
},
list: 'another'
});
Activate “another” list:
$.Shortcuts.start('another');
Remove a shortcut:
$.Shortcuts.remove({
type: 'hold',
mask: 'Shift+Up',
list: 'another'
});
Stop (unbind event handlers):
$.Shortcuts.stop();
When you use angular.js for handling events, you should use ng-keydown for preventing pause in developer in chrome.
My solution to this problem is:
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
With the magic number 123 which is the key F12.
Wow it is very simple. i'm blame to write this, why no one make it before?
$(function(){
//Yes! use keydown 'cus some keys is fired only in this trigger,
//such arrows keys
$("body").keydown(function(e){
//well you need keep on mind that your browser use some keys
//to call some function, so we'll prevent this
e.preventDefault();
//now we caught the key code, yabadabadoo!!
var keyCode = e.keyCode || e.which;
//your keyCode contains the key code, F1 to F12
//is among 112 and 123. Just it.
console.log(keyCode);
});
});
You can do this with jquery like this:
$("#elemenId").keydown(function (e) {
if(e.key == "F12"){
console.log(e.key);
}
});
Wow it is very simple. i'm blame to write this, why no one make it before?
$(function(){
//Yes! use keydown 'cus some keys is fired only in this trigger,
//such arrows keys
$("body").keydown(function(e){
//well you need keep on mind that your browser use some keys
//to call some function, so we'll prevent this
e.preventDefault();
//now we caught the key code, yabadabadoo!!
var keyCode = e.keyCode || e.which;
//your keyCode contains the key code, F1 to F12
//is among 112 and 123. Just it.
console.log(keyCode);
});
});
I am not sure if intercepting function keys is possible, but I would avoid using function keys all together. Function keys are used by browsers to perform a variety of tasks, some of them quite common. For example, in Firefox on Linux, at least six or seven of the function keys are reserved for use by the browser:
The worst part is that different browsers on different operating systems use different keys for different things. That's a lot of differences to account for. You should stick to safer, less commonly used key combinations.
Without other external class you can create your personal hack code simply using
event.keyCode
Another help for all, I think is this test page for intercept the keyCode (simply copy and past in new file.html for testing your event).
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td,th{border:2px solid #aaa;}
</style>
<script type="text/javascript">
var t_cel,tc_ln;
if(document.addEventListener){ //code for Moz
document.addEventListener("keydown",keyCapt,false);
document.addEventListener("keyup",keyCapt,false);
document.addEventListener("keypress",keyCapt,false);
}else{
document.attachEvent("onkeydown",keyCapt); //code for IE
document.attachEvent("onkeyup",keyCapt);
document.attachEvent("onkeypress",keyCapt);
}
function keyCapt(e){
if(typeof window.event!="undefined"){
e=window.event;//code for IE
}
if(e.type=="keydown"){
t_cel[0].innerHTML=e.keyCode;
t_cel[3].innerHTML=e.charCode;
}else if(e.type=="keyup"){
t_cel[1].innerHTML=e.keyCode;
t_cel[4].innerHTML=e.charCode;
}else if(e.type=="keypress"){
t_cel[2].innerHTML=e.keyCode;
t_cel[5].innerHTML=e.charCode;
}
}
window.onload=function(){
t_cel=document.getElementById("tblOne").getElementsByTagName("td");
tc_ln=t_cel.length;
}
</script>
</head>
<body>
<table id="tblOne">
<tr>
<th style="border:none;"></th><th>onkeydown</th><th>onkeyup</th><th>onkeypress</td>
</tr>
<tr>
<th>keyCode</th><td> </td><td> </td><td> </td>
</tr>
<tr>
<th>charCode</th><td> </td><td> </td><td> </td>
</tr>
</table>
<button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML=' '};">CLEAR</button>
</body>
</html>
Here is a working demo so you can try it right here:
var t_cel, tc_ln;_x000D_
if (document.addEventListener) { //code for Moz_x000D_
document.addEventListener("keydown", keyCapt, false);_x000D_
document.addEventListener("keyup", keyCapt, false);_x000D_
document.addEventListener("keypress", keyCapt, false);_x000D_
} else {_x000D_
document.attachEvent("onkeydown", keyCapt); //code for IE_x000D_
document.attachEvent("onkeyup", keyCapt);_x000D_
document.attachEvent("onkeypress", keyCapt);_x000D_
}_x000D_
_x000D_
function keyCapt(e) {_x000D_
if (typeof window.event != "undefined") {_x000D_
e = window.event; //code for IE_x000D_
}_x000D_
if (e.type == "keydown") {_x000D_
t_cel[0].innerHTML = e.keyCode;_x000D_
t_cel[3].innerHTML = e.charCode;_x000D_
} else if (e.type == "keyup") {_x000D_
t_cel[1].innerHTML = e.keyCode;_x000D_
t_cel[4].innerHTML = e.charCode;_x000D_
} else if (e.type == "keypress") {_x000D_
t_cel[2].innerHTML = e.keyCode;_x000D_
t_cel[5].innerHTML = e.charCode;_x000D_
}_x000D_
}_x000D_
window.onload = function() {_x000D_
t_cel = document.getElementById("tblOne").getElementsByTagName("td");_x000D_
tc_ln = t_cel.length;_x000D_
}td,_x000D_
th {_x000D_
border: 2px solid #aaa;_x000D_
}<html>_x000D_
_x000D_
<head>_x000D_
<title>Untitled</title>_x000D_
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<table id="tblOne">_x000D_
<tr>_x000D_
<th style="border:none;"></th>_x000D_
<th>onkeydown</th>_x000D_
<th>onkeyup</th>_x000D_
<th>onkeypress</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th>keyCode</th>_x000D_
<td> </td>_x000D_
<td> </td>_x000D_
<td> </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th>charCode</th>_x000D_
<td> </td>_x000D_
<td> </td>_x000D_
<td> </td>_x000D_
</tr>_x000D_
</table>_x000D_
<button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML=' '};">CLEAR</button>_x000D_
</body>_x000D_
_x000D_
</html>Try this solution if works.
window.onkeypress = function(e) {
if ((e.which || e.keyCode) == 116) {
alert("fresh");
}
}
Solution in ES6 for modern browsers and IE11 (with transpilation to ES5):
//Disable default IE help popup
window.onhelp = function() {
return false;
};
window.onkeydown = evt => {
switch (evt.keyCode) {
//ESC
case 27:
this.onEsc();
break;
//F1
case 112:
this.onF1();
break;
//Fallback to default browser behaviour
default:
return true;
}
//Returning false overrides default browser event
return false;
};
My solution to this problem is:
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
With the magic number 123 which is the key F12.
One of the problems in trapping the F1-F12 keys is that the default function must also be overridden. Here is an example of an implementation of the F1 'Help' key, with the override that prevents the default help pop-up. This solution can be extended for the F2-F12 keys. Also, this example purposely does not capture combination keys, but this can be altered as well.
<html>
<head>
<!-- Note: reference your JQuery library here -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h1>F-key trap example</h1>
<div><h2>Example: Press the 'F1' key to open help</h2></div>
<script type="text/javascript">
//uncomment to prevent on startup
//removeDefaultFunction();
/** Prevents the default function such as the help pop-up **/
function removeDefaultFunction()
{
window.onhelp = function () { return false; }
}
/** use keydown event and trap only the F-key,
but not combinations with SHIFT/CTRL/ALT **/
$(window).bind('keydown', function(e) {
//This is the F1 key code, but NOT with SHIFT/CTRL/ALT
var keyCode = e.keyCode || e.which;
if((keyCode == 112 || e.key == 'F1') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Open help window here instead of alert
alert('F1 Help key opened, ' + keyCode);
}
// Add other F-keys here:
else if((keyCode == 113 || e.key == 'F2') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Do something else for F2
alert('F2 key opened, ' + keyCode);
}
});
</script>
</body>
</html>
I borrowed a similar solution from a related SO article in developing this. Let me know if this worked for you as well.
Add a shortcut:
$.Shortcuts.add({
type: 'down',
mask: 'Ctrl+A',
handler: function() {
debug('Ctrl+A');
}
});
Start reacting to shortcuts:
$.Shortcuts.start();
Add a shortcut to “another” list:
$.Shortcuts.add({
type: 'hold',
mask: 'Shift+Up',
handler: function() {
debug('Shift+Up');
},
list: 'another'
});
Activate “another” list:
$.Shortcuts.start('another');
Remove a shortcut:
$.Shortcuts.remove({
type: 'hold',
mask: 'Shift+Up',
list: 'another'
});
Stop (unbind event handlers):
$.Shortcuts.stop();
Source: Stackoverflow.com