Is there any way to prevent a key like F1 from being pressed?
After a short search, I found this website:
http://www.cambiaresearch.com/c4/789d4357-60e9-4dbd-8e8c-affb2ebd6960/How-Do-I-Suppress-a-Keystroke-in-a-Browser-Input-Box-Using-Javascript.aspx
This way one can suppress keys like 'a' being pressed (it does not get put in the textbox), but keys like 'tab', 'F1' etc. are still working, i.e. the focus does change and, as I'm using Google Chrome, the Chrome help website does pop up.
I'm specifically talking about Google Chrome; the solution does not have to work in other browsers too.
Is this possible at all, and if so, how?
Thanks.
keypress is not necessarily triggered when the keypress is not a character. So the browser may not trigger an event on backspace, F1, the down key, etc.
Try cancelling events on keydown instead:
element.addEventListener('keydown', function(e) {
if (e.which === 112) { // F1 pressed
e.preventDefault(); // cancel the event
}
}
Note that this will work in Chrome and other standards-compliant browsers, but not in Internet Explorer <9.
I highly doubt that this is possible. Not only would one be able to interfere normal program behaviour (say, F5 to refresh the page, or ALT+F4 to close the browser), but in a quick test it looks like for keys like F1 etc. no event is fired, so there is no way for a input to receive that.
Related
I'm trying to stop the user from going back in my web app. For this I tried catching the window.onpopstate and added e.preventDefault to cancel the back button effect.
But it doesn't seems to happen.
window.addEventListener('popstate',function(e){
console.log(e); e.preventDefault();
});
Is it not possible to prevent the popstate event of browser? Or am I doing something wrong?
According to this documentation, the popstate event is not cancellable:
Specification: HTML5 Interface: PopStateEvent Bubbles:
Yes
Cancelable: No Target: defaultView Default Action: None
First off "not possible" is never an acceptable answer.
Secondly you can compensate for popstate bugs. In example my rich editor has to constantly compensate for the lazy-bastard key: Backspace. It's not a valid key for a back button (just like spacebar for "page downing") but people impose their personal preferences upon the world instead of adding a browser extension so when people press it sometimes the popstate is triggered instead of the editor removing whatever character is to the left of the keyboard caret.
The following code (dependencies in my platform's documentation) detects when the popstate bug is triggered, slaps it in the face with a e.preventDefault(); and then fixes the address bar address with history.go(1);. The person using the editor doesn't notice anything happened as the browser was not allowed to manipulate the DOM. This code is minimal (other people may be compensating for this bug in various contexts) and I've only tested this in Gecko/Firefox currently so be sure to test Blink, Presto, Trident and WebKit based browsers as well.
window.onpopstate = function(e)
{
if (id_('editor') && is_node_parent(document.activeElement,id_('editor')))
{
e.preventDefault();
history.go(1);
}
}
I'm using Firefox and I'd like to know how I can determine which function on a site that uses Javascript interrupts the normal operation of Spacebar key, which is supposed to scroll down a whole page (and in combo with Shift scoll up a page), and super-hijack it to work normally. How do I do that?
I don't want to disable Javascript on the whole site or everywhere, so Noscript is not a solution. I'm looking for disabling a single function.
In Chrome:
Open DevTools, choose Sources tab, on the right side expand Event Listener Breakpoints, here you choose Keyboard, and select keyup or keydown. Then use the website, it'll break on keyup or keydown, so you just have to press spacebar to find out where it's handled.
use Jonathan's answer to find what the issue is, but this will, as you call it, "super-hijack" it (probably):
function cancelUtil(e){
e.stopImmediatePropagation();
}
window.addEventListener('keydown',cancelUtil,true);
window.addEventListener('keypress',cancelUtil,true);
window.addEventListener('keyup',cancelUtil,true);
I want to do something when the escape key is pressed by the user on a text field. This code logs 27 whenever the escape key is pressed in the input box in Safari and Firefox, but not in Chrome. I also tried binding to keyup, not using jQuery (i.e., just using raw JavaScript), and tried using keyCode instead of which, none of which helped. Incidentally, Chrome seems to do just fine with all other keys like Enter, the modifier keys, etc. Any idea what's up?
NB: I'm using Chrome 22.0.1229.94 on Mountain Lion.
UPDATE: By the way, if it helps, when I press escape on the input box in Chrome, it loses focus while on the other two browsers it does not.
Finally found what was causing this: the Vimium chrome extension, which catches the Escape key.
A bug has been filed for it here: https://github.com/philc/vimium/issues/499.
I am implementing keyboard shortcuts on a website, these shortcuts are similar to Gmail. The problem I am facing with Firefox 6.0 is that, the quick find starts immediately as soon as I type any letter. If I open Gmail, the quick find only opens when I press apostrophe (').
Because of this, none of the keyboard shortcuts works on the website. It is working fine on all the other browsers and other versions of Firefox.
Should I use event.preventDefault() for each character. I don't want to do that, is there any other work around?
Using event.preventDefault() on each key event whose default action you want to prevent is exactly the right thing to do here. Why do you not want to do that?
It's hard to tell without looking at your code, but it seems that you are intercepting the keypress event, when you should be intercepting the keydown event. If you use event.preventDefault() on the keydown event, it should prevent the default browser behaviour connected to that key.
I just read this question: Full Screen Page by pressing button instead of F11
The op asked to replace F11 with other hot keys, so I'm wondering that maybe I can simulate press F11 to get things work.
I learned that I can use trigger in JQuery to simulate key press event, so I do something like this:
$("body").keyup(function (e) {
alert(e.which);
});
var e = $.Event("keyup");
e.which = 122; // # Key code of F11
$("body").trigger(e);
When I run this, I got the alert says 122, but it seems that it doesn't give the hoped result. Is there a restriction there?
I made a fiddle here: http://jsfiddle.net/ap295/5/
I think this is the one :) to detect it ...
$(document).keyup(function(e){
if(e.which==122){
e.preventDefault();//kill anything that browser may have assigned to it by default
//do what ever you wish here :)
alert('F11 pressed');
return false;
}
});
but triggering it (NOT POSSIBLE)
But you will not prevent the browser from full screen :) ...
Reson given is that , lets say I have full screened it somehow, and wish to toggle out of it using F11 but u are preventing me, I would have to restart PC, [computer illiterates] which poses security risk as you are preventing a user from doing something he is expecting to do, and they may think PC is broken or something :) so ...there you are.
You can not do this. The linked answer in that question provides a way with jQuery to simulate key-presses, within the jQuery event framework.
You simply can not trigger or fake keypresses. So the answer of this question is:
No, this is impossible
You won't be able to override the browser's built-in hotkeys from within a web page.
You might be able to do it in a browser extension, but that's would surely be serious overkill just to change the application's hotkeys.
In any case, why would you even want to override the standard keyboard shortcuts? I don't get that. They've been standard for a long time; most users will be familiar with them, and will find it very odd if they've been changed to something else.
Don't look at is as a question of "How do I trigger F11?" - look at is as "How do I trigger or simulate full-screen?"
With older versions of IE you can open a new window straight into full-screen:
window.open(someURLorOther, '', 'fullscreen=yes, scrollbars=auto');
Or you can use window.open to open a new window of a specific size.
Or you can try to resize the current window to fill the screen:
moveTo(0,0);
resizeTo(screen.availWidth,screen.availHeight);
However just because you can doesn't mean you should. You should never resize the current window - this annoys practically everyone. Opening a new window to a size you choose is more reasonable, though if it's too big it can be annoying, and on a normal web page (where by "normal" I probably mean not some kind of browser-based data-entry app) it is nicer not to open new windows.