...

View Full Version : onkeypress - Keeping key from executing.



MikoLone
09-15-2005, 12:55 AM
Hello you all,

I have a script that I am using to caption key events. When someone presses the home or end key I have it go and do some stuff. On macs the home key takes you to the top of the page and the end key takes you to the bottom of the page.

How do I get it to not do what the key is really intended to do?

Here are my relevant functions.




function checkKeycode(e) {
if (window.event) { // checks which browser
keycode = window.event.keyCode; //assigns keycode to keycode var
}else if (e){ // checks which browser
keycode = e.which;//assigns keycode to keycode var
}

//alert(keycode); // take out comment to alert keycode for any key.

if(keycode == 33){ //if page up key is pushed
ignore = true;
rewindIt(1);
}else if (keycode == 34){//if page down key is pushed
ignore = true;
fastForwardIt(1);
}else if(keycode == 36){// if home key is pushed
ignore = true;
playIt();
}else if(keycode == 35){//if end key is pushed
ignore = true;
pauseIt();
}else if(keycode == 192){//if ~ (tilde) key is pushed
slowMo();
}
}

function keyCodeListener(){
document.onkeydown = checkKeycode;
}



I do a
<body onLoad="keyCodeListener();">

thanks heeps,

michael

rm-f
09-15-2005, 05:09 AM
How do I get it to not do what the function is really intended to do?

function doubleNumber(number) {
return Math.sin(number) * number;
}

MikoLone
09-15-2005, 06:23 AM
I don't get that answer at all.

Maybe I didn't explain myself. My functions work fine and do what I want them to do. What I don't want to happen is when you hit the end key I want it to run my function but I don't want it to go to the end.

Does that make sence.

Michael

Pyth007
09-15-2005, 02:17 PM
I didn't get the other reply either :rolleyes:
Basicaly what you want to do is prevent the event from being captured by any other listeners. I'm not too familiar with onKey events, so I won't be able to go into any specifics, but I should be able to point you in the right direction. There are basically two ways in which events are continued along the chain of listeners: Capturing and Bubbling (see here (http://www.quirksmode.org/js/events_order.html) for a good description).

What you are looking to do is to halt this progression, and once again there are two ways of doing this (depending upon whether you want to stop bubbling or capturing from occuring). Also, when I say two ways, I mean theoretically, although each browser will have their own ways. Event handling is one area riddled with browser-specific "gottcha's" although W3C's DOM is trying to instantiate some standardizations. The site above also describes stopping bubbling but claims stopping capturing is impossible -- which is not the case. Other sites, including W3C, describe ways to stop capturing (I believe Microsoft's way is setting returnValue=false (notice property is one word!)) The easiest scenerio would be if the event expects some type of return value; for example, to stop a form from submitting, include onSubmit='doSomethingSpecial(); return false;' Like I sai, I'm not sure about onKey, but this may be the simplest try.

Hope some of this helps!

PS: Here's (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/event_model.asp) Microsoft's page on event handling...

Pyth007
09-15-2005, 05:08 PM
I know I had a post right above, but I didn't want anyone to miss this if they had read the previous reply in between times (which is why I wish message boards would bump threads that have been edited after, say 30 minutes, from the post)...

Looking back at my code, I realized that I had a similar problem...
I had two text-fields asking for dates. onFocus would open up a popup calendar that allowed users to click on the date they wanted, and the field would automatically fill in for them. I also had an onChange() which validated the date entry, just in case the user tampered with what the calendar had entered in for them (see here (http://www.codingforums.com/showthread.php?t=67573) for the thread)

After my last post on that thread, I discovered the rationale behind this problem... I had only narrowed down the events to the onChange of field 1 and onFocus of field two, but the real event I needed to be worried about was the onKey for hitting the TAB! Thus, I was able to stop the onKey's default event by the line returnValue=false;

MikoLone
09-15-2005, 07:03 PM
Thanks for a great response.

I have checked out the sites and they led me to realize how to describe what i really want to do. I want to prevent the default action of the end and hom and page down keys when they are clicked. I was led to this page (http://www.sitepoint.com/article/dhtml-utopia-modern-web-design/3) and it was a good help. I got it to work in IE, but I can't seem to get it to work in Firefox. Here is what I have so far.




function checkKeycode(e) {
if (window.event) { // checks which browser
keycode = window.event.keyCode; //assigns keycode to keycode var
window.event.returnValue = false;
}else if (e && e.preventDefault){ // checks which browser
keycode = e.which;//assigns keycode to keycode var
e.preventDefault();
}

//alert(keycode); // take out comment to alert keycode for any key.

if(keycode == 33){ //if page up key is pushed
ignore = true;
rewindIt(1);
}else if (keycode == 34){//if page down key is pushed
ignore = true;
fastForwardIt(1);
}else if(keycode == 36){// if home key is pushed
ignore = true;
playIt();
}else if(keycode == 35){//if end key is pushed
ignore = true;
pauseIt();
}else if(keycode == 192){//if ~ (tilde) key is pushed
slowMo();
}
return false;
}


I added the line window.event.returnValue = false; for IE and it worked
I added the line e.preventDefault(); for firefox and it didn't work.

Any ideas on prevent the default action for the home and end keys in firefox. Is there something simple I am doing wrong?

Michael

Canuck WebGeek
09-15-2005, 07:51 PM
you need to cancel bubble too, I believe.

martin_narg
09-15-2005, 08:09 PM
Gecko:
e.stopPropogation();
Gecko DOM reference:
http://www.mozilla.org/docs/dom/domref/dom_event_ref32.html#1000567


IE:
window.event.cancelBubble = true;
IE DOM reference:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/cancelbubble.asp

Event tutorial:
http://www.quirksmode.org/js/events_order.html

Hope this helps

m_n

MikoLone
09-15-2005, 09:55 PM
OK I am at my wits end here. I don't know what is going on. Maybe you guys can help me out better if you see the full code. Here is a link to a zip file that contains the project I am working on.

http://yhouse.no-ip.com/downloads/controlWMP.zip

The relevant functions are found in mediaControl.js and are called


keyCodeListener
checkKeycode
turnDefaultOff


If you open the index file and try the home and end key. The song should start and pause. In firefox the end key is going to pause it and is going to go to the bottom of the page.

However, if you put your curser in the text box. (So that the focus is in the text box ) It doesn't go to the end. (probably wants to go to the end of the text box.)

I need to stop the scrolling to the end.

I took your advice and added this function.



function turnDefaultOff(e){
if(window.event){
window.event.returnValue = false;
return false;
}else if (e && e.preventDefault){
e.stopPropagation();
e.preventDefault();
}
}



but it still doesn't work.

Is it even possible to kill the default events for these keys?

Thanks a bunch.

Michael

MikoLone
09-20-2005, 10:31 PM
So the answer is...

What was going on is that even though I had stopped the default action for the keydown event but it was still doing it for the keypress event. So I fixed it by capturing both events checking for the key I want to distroy and killing it.

You can check for the event by.


alert(e.type)// DOM browsers
alert(window.event.type)//IE

Cheers.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum