javascript capture browser shortcuts (ctrl+t/n/w)
Is it possible to capture these shortcuts?
- Ctrl+N
- Ctrl+T
- Ctrl+W
I tried this but it doesn't work:
$(window).keydown(function(event) {
console.log(event.keyCode);
event.preventDefault();
});
When I press T it shows 84
in the console, but if I press Ctrl+T it shows nothing, and opens a new tab.
I would like to capture these shortcuts and prevent any browser action.
Capturing Ctrl keyboard events in Javascript
Sample code:
$(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();
}
});
Firefox
(6.0.1 tested)
In Firefox both event listener works. If you press CtrlT or CtrlS keycombinations, you will get both message on the console, and the browser wont open a tab, nor ask for save.
It is intresting that if you use alert
instead of console.log
the event.preventDefault()
not works, and opens a new tab or asks for save. Maybe this bug needs to get fixed.
Chrome3
In Chrome 3 it works like in Firefox.
Chrome4
(tested)
In Chrome4, certain control key combinations have been reserved for browser usage only and can no longer be intercepted by the client side JavaScript in the web page.
These restrictions did not exist in Chrome3 and are inconsistent with both Firefox3/3.5 and IE7/8 (on Windows).
In Chrome 4 it works similary to Firefox, except some keyboard combination:
-
CtrlN
-
CtrlShiftN
-
CtrlT
-
CtrlShiftT
-
CtrlW
-
CtrlShiftW
These combinations cannot get captured by Javascript, but embed plugins can capture these. For example if you focus in a Youtube video and press CtrlT, the browser won't open a new tab.
IE7/8
It works like in Firefox or Chrome3.
IE9
(tested)
IE9 is a black sheep again, because it dosen't allow javascript to capture any Ctrl? keyboard event. I tested with many keyboard combination (R,T,P,S,N,T) and neither worked. Also embed applications can't capture the event. Tested with Youtube videos.
Thanks to @Lime for the great link.
As of March, 20th, 2012, there has been a Chrome fix that allows web applications to handle Control+NWT in Chrome in js keydown event (so it works in pure javascript, or any library like jQuery).
This fix allows javascript to handle this key combinations if Chrome is opened in Application mode, which can be done in this way:
- Starting Google Chrome in application mode
The fix is documented here:
- Don't filter shortcut keys when a tab is opened in app mode (aka: windowed or pop-up mode).
To expand on the other answers:
The code to block certain combinations in Chrome/Chromium is defined here, im summary, F11 to exit fullscreen mode and everything manipulating and navigating tabs or windows is blocked:
[Shift]Ctrl(Q|N|W|T|Tab ↹)
Instead of trapping the Ctrl+W hotkey, detect when the window is closed might be a valid option:
"The beforeunload event is fired when the window, the document and its resources are about to be unloaded.
When a non-empty string is assigned to the returnValue Event property, a dialog box appears, asking the users for confirmation to leave the page (see example below). When no value is provided, the event is processed silently."