Emscripten: up and down keys scroll browser

SDL Development
1

In the latest version of Emscripten (3.1.30, which comes with SDL 2.24.2) pressing the up and down arrow keys causes the browser to scroll, as well as generating SDL_KEYDOWN events. This is generally undesirable and used not to happen.

Is there a way of disabling this behavior so the keys only get sent to SDL2? I don’t mind if the PgUp and PgDn keys scroll the browser (although it would be nice to be able to disable that too).

2

Even if you don’t know the solution, can somebody at least tell me whether it is likely to be an SDL2 issue or an Emscripten issue, so I know the best place to pursue it?

3

This turned out to be because I was calling SDL_SetEventFilter() in my code. Changing this to SDL_AddEventWatch() restored the desired behavior of the arrow keys not scrolling the browser (canvas). I don’t claim to understand why calling SDL_SetEventFilter() had that effect (especially since it didn’t in Emscripten 2.0.5) but I’m happy to have a solution.

4

I think there’s an use case, say you want to have a text editor to write basic code and then build and run in your engine, all in the same html page, so you may want to be able to either capture or not those keys.

I am curious if it’s handling focus or if it can be somehow tied to focus - say if the canvas has focus it captures the keys and of not, then it doesn’t.

But it’s good you found a fix for your case.

5

If you want all the keys to go to the canvas rather than to SDL2 you can do:

SDL_SetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT, "#canvas");

But that doesn’t help if you want to be selective. The list of keys which are treated as ‘navigation’ keys and are filtered from going to the canvas is in SDL_emscriptenevents.c:

    if ( (scancode == SDL_SCANCODE_BACKSPACE) ||
         (scancode == SDL_SCANCODE_TAB) ||
         (scancode == SDL_SCANCODE_LEFT) ||
         (scancode == SDL_SCANCODE_UP) ||
         (scancode == SDL_SCANCODE_RIGHT) ||
         (scancode == SDL_SCANCODE_DOWN) ||
         ((scancode >= SDL_SCANCODE_F1) && (scancode <= SDL_SCANCODE_F15)) ||
         keyEvent->ctrlKey ) {
        is_nav_key = SDL_TRUE;
    }

Short of editing this file and compiling the Emscripten SDL port from source (which is very inconvenient compared with simply using -s USE_SDL=2) the list is fixed and not customisable. I have suggested that being able to do so would be a worthwhile improvement.

6

I had a problem in iOS web apps where, with a bluetooth keyboard and iPad, the screen would bounce (trying to scroll down, despite everything being configured to prevent scrolling) every time the user pressed the space bar.

I fixed it by patching SDL to add the space to the is_nav_key in SDL_emscriptenevents.c, and while I haven’t noticed any bad side-effects that I care about, I’m not sure this change belongs in the main branch. Making the list configurable without touching the SDL source is probably a good idea.

keyEvent->keyCode == 40 /* down */ ||
keyEvent->keyCode == 32 /* space */ ||   /* <- this is my new line */
(keyEvent->keyCode >= 112 && keyEvent->keyCode <= 135) /* F keys*/ ||
7

Just another solution by javascript:

You can ativated it by calling js code in emscripten, or just put the code inside macro

#ifdef __emscripten__
//js code here
#endif

Edit:
-this code should be event in the canvas element and not the browser (window). If do the whole browser will stop do scroll down.