Detecting Ctrl - F11 with javascript - javascript

I googled the answer in couple ways but couldn't find a good answer without any library. It was also not asked in stackoverflow. So I thought it might also be helpful to someone else as well. I know I can detect window keyup or down event but how can I detect Ctrl + F11 event in the same time?
$(window).keypress(function (e) {
var keyCode = e.which;
if (keyCode == 122) {
console.log("You pressed f11");
}
})
Thank you.

Using Javascript:
document.onkeydown = keydown;
function keydown(e) {
var evtobj = window.event ? event : e
if (evtobj.keyCode == 122 && evtobj.ctrlKey)
alert("[JS] Ctrl + F11 pressed");
}
<p>Press Ctrl + F11</p>
More Info:
KeyboardEvent.ctrlKey
Keycodes Info
Using jQuery:
$(document).keydown(function(e) {
if (e.which == 122 && e.ctrlKey)
alert("[jQuery] Ctrl + F11 pressed");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Press Ctrl + F11</p>
More Info:
Event Object

Related

Javascript Keycode for a: 65 or 97?

I'm working with javascript (on a macbook pro OSX 10.11.x, not sure if this matters) using Chrome browser.
Im using the function:
window.onkeypress = function(e) {
var key = e.keyCode ? e.keyCode : e.which;
console.log("keypressed = " + key);
}
when i press 'a' key on my keyboard, it logs as 97, however this does not correspond to any other keyCode list i find on the internet, which states 'a' is 65.
This is the same for other keys as well, for example, 's' for me is 115, but everyone else states that 's' is 83.
Is there a dependency that i'm missing? If i fire an event assuming a == 95, will it work on other browsers?
Thanks.
So I found that a capital A is indeed, 65.
A lowercase a is 97
Please see this chart:
Chart original location: http://www.asciitable.com/
Capital letters are not the same as lower-case and produce different codes.
Also, the keypress event works differently than the keyup or keydown events. keypress responds to printable characters and gives the code of the character that was produced. With keyup and keydown, the code represents the physical hardware key on the keyboard that was pressed. For example, if you run the snippet below and just press the SHIFT key, you will not see the keypress event log message at all because that event doesn't fire for that key.
window.addEventListener("keyup", function(e) {
var key = e.keyCode ? e.keyCode : e.which;
console.log("key up = " + key, e.key);
});
window.addEventListener("keydown", function(e) {
var key = e.keyCode ? e.keyCode : e.which;
console.log("key down = " + key, e.key);
});
window.addEventListener("keypress", function(e) {
var key = e.keyCode ? e.keyCode : e.which;
console.log("key pressed = " + key, e.key);
});
Just click in this area to give it the focus, then press some keys.

Trying to suppress the backspace and F5 button is also suppressing the lower case "t" button

I am trying to stop the user from navigating away from the page while they are inputting some text. I am doing this by suppressing the F5 button and the backspace button, which goes back.
Now I notice that I cannot press t. When I check the logs, it's because t is giving me a key event code of 116 which is the same as the F5 button.
How can I get around this?
Here is a code snippet.
function suppressBackspaceAndF5(evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
// when I release "t" - the code is 116, which is the same as the refresh code.
console.log(evt.keyCode);
if ((evt.keyCode == 8 &&
!/input|textarea/i.test(target.nodeName)) ||
evt.keyCode == 116) {
return false;
}
}
document.onkeydown = suppressBackspaceAndF5;
document.onkeypress = suppressBackspaceAndF5;
<input></input>
I found this related Stackoverflow question which seems to contains your answer. Posting here specifically as a reference:
capturing f5 keypress event in javascript using window.event.keyCode in window.onbeforeunload event is always 0 and not 116
Excerpt: by SO user Sim_ba
Dont use e.keyCode == 166 use e.code == 'F5' instead.
function fkey(e){
e = e || window.event;
if( wasPressed ) return;
function fkey(e){
e = e || window.event;
if (e.code === 'F5') {
alert("f5 pressed");
wasPressed = true;
}else {
alert("Window closed");
}
}
This is because the 't' and 'F5' both use the keycode number 116. [...]
Go vote Sim_ba up as well! :)

Hotkey to Button

Is there any way to make a keyboard shortcut that will click on a button on a webpage.
Like I would like to have a hotkey : Ctrl+S to automatically click on Search on Google.
I've tried this : Shortcut Manager plugin but I'm not sure how to assign it.
This might help:
See this jsFiddle
$(window).keypress(function(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
var rr = $('#report').html();
$('#report').html(rr + '<br />' + keycode);
if (e.ctrlKey) alert('Control pressed');
//if (!(keycode == 115 && e.ctrlKey) && !(keycode == 19)) return true;
if (!(keycode == 83 && e.ctrlKey) && !(keycode == 17)) return true;
alert("Ctrl-S pressed");
$('#gsearch').trigger('click'); //or just .click() also works
e.preventDefault();
return false;
});
Note that webkit browsers will not trap ctrl, alt, shift, etc keys. See this article for info

Capturing ctrl+z key combination in javascript

I am trying to capture ctrl+z key combination in javascript with this code:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script type='text/javascript'>
function KeyPress(e) {
var evtobj = window.event? event : e
//test1 if (evtobj.ctrlKey) alert("Ctrl");
//test2 if (evtobj.keyCode == 122) alert("z");
//test 1 & 2
if (evtobj.keyCode == 122 && evtobj.ctrlKey) alert("Ctrl+z");
}
document.onkeypress = KeyPress;
</script>
</body>
</html>
Commented line "test1" generates the alert if I hold down the ctrl key and press any other key.
Commented line "test2" generates the alert if I press the z key.
Put them together as per the line after "test 1 & 2", and holding down the ctrl key then pressing the z key does not generate the alert as expected.
What is wrong with the code?
Use onkeydown (or onkeyup), not onkeypress
Use keyCode 90, not 122
function KeyPress(e) {
var evtobj = window.event? event : e
if (evtobj.keyCode == 90 && evtobj.ctrlKey) alert("Ctrl+z");
}
document.onkeydown = KeyPress;
Online demo: http://jsfiddle.net/29sVC/
To clarify, keycodes are not the same as character codes.
Character codes are for text (they differ depending on the encoding, but in a lot of cases 0-127 remain ASCII codes). Key codes map to keys on a keyboard. For example, in unicode character 0x22909 means 好. There aren't many keyboards (if any) who actually have a key for this.
The OS takes care of transforming keystrokes to character codes using the input methods that the user configured. The results are sent to the keypress event. (Whereas keydown and keyup respond to the user pressing buttons, not typing text.)
For future folks who stumble upon this question, here’s a better method to get the job done:
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'z') {
alert('Undo!');
}
});
Using event.key greatly simplifies the code, removing hardcoded constants. It has support for IE 9+.
Additionally, using document.addEventListener means you won’t clobber other listeners to the same event.
Finally, there is no reason to use window.event. It’s actively discouraged and can result in fragile code.
Ctrl+t is also possible...just use the keycode as 84 like
if (evtobj.ctrlKey && evtobj.keyCode == 84)
alert("Ctrl+t");
$(document).keydown(function(e){
if( e.which === 89 && e.ctrlKey ){
alert('control + y');
}
else if( e.which === 90 && e.ctrlKey ){
alert('control + z');
}
});
Demo
document.onkeydown = function (e) {
var special = e.ctrlKey || e.shiftKey;
var key = e.charCode || e.keyCode;
console.log(key.length);
if (special && key == 38 || special && key == 40 ) {
// enter key do nothing
e.preventDefault();
}
}
here is a way to block two keys, either shift+ or Ctrl+ key combinations.
&& helps with the key combinations, without the combinations, it blocks all ctrl or shift keys.
90 is the Z key and this will do the necessary capture...
function KeyPress(e){
// Ensure event is not null
e = e || window.event;
if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) {
// Ctrl + Z
// Do Something
}
}
Depending on your requirements you may wish to add a e.preventDefault(); within your if statement to exclusively perform your custom functionality.
The KeyboardEvent.keyCode is deprecated (link) think about using KeyboardEvent.key instead (link).
So, the solution would be something like this.
if (e.key === "z" && e.ctrlKey) {
alert('ctrl+z');
}
You can actually see it all in the KeyboardEvent when you use keydown event
Use this code for CTRL+Z. keycode for Z in keydown is 90 and the CTRL+Z is ctrlKey. check this keycode in your console area
$(document).on("keydown", function(e) {
console.log(e.keyCode, e.ctrlKey);
/*ctrl+z*/
if (e.keyCode === 90 && e.ctrlKey) { // this is confirmed with MacBook pro Monterey on 1, Aug 2022
{
//your code here
}
});

Overriding shortcut keys in Firefox and Chrome

I have a script that is supposed to open a section of a web page, and save changes on Ctrl + n and Ctrl + s respectively. I got it working in IE, but it doesn't seem to work in Firefox and Chrome. Any ideas?
My override function.
function prevent(e)
{
try{e.stopPropagation();}catch(ex){}
try{e.preventDefault()}catch(ex){}
try{if (e.preventDefault)
e.preventDefault();
else {
e.cancelBubble = true;
e.returnValue = false;
e.keyCode = 0;
}} catch(ex){}
}
I have seen the same issue. Some browsers will not allow you to capture certain shortcuts. Look at this https://stackoverflow.com/a/7296303/1366887
Some key combinations are resticted in Chrome 4, but not in Chrome 3. Look here: https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-bugs/Ntc1byZXHfU
Here is the Javascript:
$(window).keydown(function(event) {
if(event.ctrlKey && event.keyCode == 84) {
console.log("Hey! Ctrl+T event captured!");
event.preventDefault();
}
if(event.ctrlKey && event.keyCode == 83) {
console.log("Hey! Ctrl+S event captured!");
event.preventDefault();
}
});
I have used this numerous times, and it has worked greatly.
Here is another rescource you can take a look at: http://unixpapa.com/js/key.html
Without Jquery:
onkeydown = function(e){
if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)){
e.preventDefault();
//your saving code
}
}
Here is a JSFIDDLE of it working.
For anyone looking for this in the future, the answer for current browsers is the following:
if (event.ctrlKey && event.key === 'k') event.preventDefault()

Categories

Resources