How to disable specific keyboard keys on a webpage? - html

Question

I am developing a webpage using Wordpress 3.04, and I'm experiencing the following issue:
In this webpage, I implemented a script that changes the background image every 10 seconds or so. Now, when users press the Left Arrow and Right Arrow keys, it makes the background picture change back and forth accordingly, and messes up the rotation cycle.
This becomes a problem in the Contact Form section of the site, since users that might need to navigate left and right inside each field might end up changing the background pic instead.
I would also like to disable the "Enter" key, to avoid the form being sent if the users are not done writing their message.
I looked around and found this javascript code that didn't work:
document.onkeydown=function DisableCTRL(e)
{
var val=(document.all)?event.keyCode:event.which;
if(parseInt(val)==17)//CTRL
{
alert('Not Allowed!');
window.event.returnValue=false;
}
}
This JS code didn't work either:
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
Any help will be greatly appreciated. Thanks!

Answer 1

I think, you should call stop() on the passed event, i.e.
document.onkeydown = function(e) {
if (e.keyCode == 17) {
alert('Not Allowed!');
e.stop();
}
};
and maybe use addEventListener(). I am not sure, intercepting the Ctrl key down will actually turn of Ctrl altogether. I guess, you need to intercept cursor left/right with the ctrlKey attribute set. For testing key events, see e.g. http://unixpapa.com/js/testkey.html.
PS. document.all: http://javascript.about.com/od/hintsandtips/a/worst_4.htm

Answer 2

You need to call e.preventDefault() to stop the event from going ahead.. I wrote this function to handle unwanted keys on a site recently:
PreventIllegalKeyPress = function (e) {
if (e.target) t = e.target; //Firefox and others
else if (e.srcElement) t = e.srcElement; //IE
if (e.keyCode == 116) { //prevent F5 for refresh
e.preventDefault();
}
if (e.keyCode == 122) { //F11 leave fullscreen
e.preventDefault();
} else if (e.altKey && e.keyCode == 115) { //Alt + F4
e.preventDefault();
} else if (e.altKey && e.keyCode == 37) { //Alt + left
e.preventDefault();
} else if (e.altKey && e.keyCode == 39) { //Alt + right
e.preventDefault();
} else if (e.ctrlKey && e.keyCode == 82) { //Ctrl + R (reload)
e.preventDefault();
}
if (!(t.tagName == 'INPUT')) {
if (e.keyCode == 13) { //enter
e.preventDefault();
}
if (e.keyCode == 8) { //backspace
e.preventDefault();
}
}};
Note the check for t.tagName == "INPUT". This makes sure that both enter and backspace keys are allowed in input field but no-where else.
Then in $(document).ready, paste the following snippet to call the function:
$(document).keydown(function (e) {
NFS.PreventIllegalKeyPress(e);
});
This works perfectly fine for me.