I think what you actually want to do is prevent the default behavior for the event. You could use something like the Yahoo UI Library's Event Utility to accomplish this. For example:

<script type="text/javascript" src="./yui/build/yahoo/yahoo-min.js"></script> 
<script type="text/javascript" src="./yui/build/event/event-min.js"></script> 
<script type="text/javascript"> 
function stopSpacebar(e) { 
 if( 32 == YAHOO.util.Event.getCharCode(e) ) 
 { 
  YAHOO.util.Event.preventDefault(e); 
 } 
} 
YAHOO.util.Event.on(window,'keypress',stopSpacebar); 
</script> 

This is going under the assumption that only the spacebar will return the charCode of 32.

Hi,

This seems to work (in the head):

window.onkeydown=function(e){
  if(e.keyCode==32){
   return false;
  }
};

Andrew

Do it on keypress, not keydown. Events go like this:

User presses spacebar down:
* keydown event fires
* keypress event fires
User continues to hold down key:
* keypress event fires repeatedly until...
User depresses the key:
* keyup event fires

By triggering on the keydown event instead of keypress, the browser default will still be performed if the user holds the key down.

Also, I'm not a big fan of just overwriting the event handlers because some third party script might overwrite it as well. The YAHOO stuff will let you 'attach' a listener, so you don't need to worry about it being overwritten.

[edited by: Fotiman at 11:28 pm (utc) on Jan. 18, 2007]

Hi,

Meeting all required specification points:

window.addEventListener('keydown',function(e){if(e.keyCode==32){e.preventDefault();}},true);

I'm not a 100% why but keypress doesn't allow the stopping of the space press before the browser acts upon it.

Andrew

[edited by: Little_G at 11:40 pm (utc) on Jan. 18, 2007]

The keypress method works with the YAHOO method (for Firefox).

Meeting all required specification points:

window.addEventListener('keydown',function(e){if(e.keyCode==32){e.preventDefault();}},true);

Note, your example will fail in IE because IE implements events differently. It has a global event object instead of passing the event into the event handler.

I'm not a 100% why but keypress doesn't allow the stopping of the space press before the browser acts upon it.

At first I suspected the reason I stated above, but trying out the example I gave also doesn't work in IE. I think because the event does not seem to be triggered at the window object.

[edited by: Fotiman at 12:10 am (utc) on Jan. 19, 2007]

Hi,

Note, your example will fail in IE because IE implements events differently.

True, but JAB Creations did specify Firefox, this my be an over site on his part because Internet Explorer does also use the space bar as a 'page down' as does Opera. Have to wait for a response to see if he needs it cross-browser.

Andrew

Andrew...

window.onkeydown=function(e){
if(e.keyCode==32){
return false;
}
};

...worked perfectly for me! I was still able to call the spacebar to execute a function and Firefox did not use the spacebar as a second pagedown key! Thank you very much!

Fotiman...
I've browsed the Yahoo scripts and while they do work (for the most part) they seriously need to be made in to separate test cases. I'll probably post an example within a few weeks here in the forums.

Thanks to both of you!

- John

Interesting... I'm surprised that works for keydown and not keypress in Firefox. The example I posted (using YUI) works (and uses keypress).

they seriously need to be made in to separate test cases

I'm not sure what you mean exactly... there are many examples, and the code is extremely well documented.

I haven't tested anything other then Firefox so if Andrew's code doesn't work in IE and yours does then great! I try to achieve my goals in the fewer number of steps though as it helps me learn the basics before I start compiling five page long scripts! (oh I hope it never comes to that hehehehe)

A separate test case involves a single file HTML document that contains all of it's CSS and JavaScript on the page itself with no need for other files to have the script work (though images or objects are the acceptable exceptions).

- John

so if Andrew's code doesn't work in IE and yours does then great!

Actually, it seems that my approach might not work in IE either. I'm not sure yet exactly why, but I'll let you know if I figure it out.

A separate test case involves a single file HTML document that contains all of it's CSS and JavaScript on the page itself with no need for other files to have the script work (though images or objects are the acceptable exceptions).

That doesn't seem very useful, especially since the YUI stuff is a framework with dependencies, etc. What's the benefit of having all the script contained in the page vs. linking it in?

Note, they do have some combined versions. For example, there's a yahoo-dom-event.js file that contains all of the yahoo-min.js, dom-min.js, and event-min.js contents. But you still need to include the script.

Why do you consider the space bar to be the secondary page down key? To some folks, the space bar is the primary page down key, from a long Unix heritage.

I dislike websites that try to modify the behaviour of my browser.

Note, I agree with wruppert here. Not that I personally use the spacebar for page down, but I'm sure some people do. I generally think it's a bad idea to remove functionality that is built into a browser.

The spacebar on my current project opens up menus and layers whereas the enter key opens a new page. It's an accessibility issue making keyboard only navigation a high priority.

I suppose we can implement the "developer's default" key actions as an option. It's annoying in regards to my goal but not nearly obnoxious as loosing an entire post because developers thought using the backspace key to act as a back button was a good idea (after you loose focus on the textarea and hit backspace). Developers are awesome-sauce at developing but they need to leave design to designers.

- John

It's annoying in regards to my goal but not nearly obnoxious as loosing an entire post because developers thought using the backspace key to act as a back button was a good idea

What other key would you have proposed? Looking at me keyboard, Backspace seems the most logical choice to go back.

ALT+Left works just fine.

Looking at the evolution of keyboards the following media keys should be standards (though aren't on all) keyboards now...

Back, Forward, reload, Home, Bookmarks/Favorites, New Tab, Print, Volume +, Volume -, Mute, Previous, Play/Pause, Stop, and Next.

The devolution includes the addition of the flock key (which is completely useless). Laptop keyboards are completely unbearable and their FN (function) keys are poorly placed. There is more then enough room on laptops to include the additional media keys. Yet another market in which few if any are doing anything right. If I only didn't have to sleep...

- John

It's an accessibility issue making keyboard only navigation a high priority.

Its actually an accessibility issue to break the default behavior of the browser and the functionality of the space bar, isn't it?

Spacebar to scroll downward.
Spacebar + Shift to scroll upward.

P.S. I'm a keyboard user and utilize the spacebar quite frequently throughout the day. I might be a bit disappointed if a site broke that feature. ;)

Why not use Access Keys?

I know, because they don't behave the same in all browsers. :(

Access keys are limited and are not cross-browser consistent. Also it was the browser developer's choice to break accessibility, not mine.

Again I'll mentioned we'll include a "developer's keyboard" as an option (in contrast to the default Designer's Keyboard) once our project is complete late this fall.

I'm currently thinking of how to introduce features at various page intervals as our site will be drastically different from what is commonly expected. Thanks to everyone for their input!

- John

[edited by: JAB_Creations at 12:19 am (utc) on Jan. 21, 2007]

Looking at me keyboard, Backspace seems the most logical choice to go back.

This was confirmed to me by the better half who used it in front of me. I had never seen that. She just figured it out on her own. Quite useful on those #$^%& sites that open menuless popups. Backspace and control-n are your friends here.

Reading the title spurred me to try the space bar shortcut. Glad I found it.

And now someone wants to take it away.

I suggest that the shortcut key selection ought to be mapped to the shortcut key selection found in standard windows apps. Having shortcuts that are unique to a particular site sounds like it would actually decrease accessibility because everything is going to be unfamiliar to the arriving user. For example, if on *every* other site, the spacebar works to do a page down, it's going to come as a huge surprise that it does something else on one particular site.

Programmers *are* designers. Even if they did not make the same design choices as someone might have preferred. Actually, the whole job description is design.