[whatwg] Is there a way to stop scrolling when pressing directional arrows?

Simon Pieters simonp at opera.com
Mon Jun 14 15:56:26 PDT 2010

On Tue, 15 Jun 2010 00:16:13 +0200, Kornel Lesinski <kornel at geekhood.net>  

> On Mon, 14 Jun 2010 20:38:07 +0100, Carlos Andrés Solís  
> <csolisr at gmail.com> wrote:
>> Hello! I've been noticing a problem in many HTML5 test apps, very  
>> especially games. When the directional arrow buttons are pressed, the  
>> screen scrolls.
>> This is a problem that, as far as I know, Flash had solved by changing  
>> the focus of the application to the app. Is this doable in HTML5?
> Yes. It's possible already — page just has to return false from keypress  
> handler:
> window.onkeypress = function(){return false}
> That's just one line that, unfortunately, many web-based games forget to  
> include.

If a game is embedded in a page with other content, it could make the  
<canvas> (or whatever) focusable with tabindex='0' and only disable keys  
when the game has focus. It could also be nice and only disable the keys  
it chooses to use.

var mapping = {37: 'left', 38: 'up', 39: 'right', 40:'down'}
function press(e) {
   if (!e.shiftKey && !e.ctrlKey && !e.metaKey && e.keyCode > 36 &&  
e.keyCode < 41) {
     var ctx = e.target.getContext('2d');
     ctx.clearRect(0, 0, e.target.width, e.target.height);
     ctx.fillText(mapping[e.keyCode], 20, 20);
<canvas tabindex=0 onkeypress=press(event)></canvas>

In Opera, I can scroll using the arrow keys, navigate to the game,  
interact with it using the arrow keys without it scrolling the page, and  
navigate away from it using spatnav (shift+arrow keys).

Simon Pieters
Opera Software

More information about the whatwg mailing list