On the page with my HTML5 game, I want to include an HTML text input box, but the UE4 canvas consumes all key presses. I am unable to edit any text in the text box. How do I set up the page so that when I click something other than the canvas, it loses focus and stops consuming keystrokes? Then when I click back on the canvas, the game should regain focus and resume consuming keystrokes.
Mouse clicks work on all HTML elements. I can click buttons and comboboxes just fine. Only keystrokes are being consumed by the canvas.
This behavior is the same on:
4.17.2 Firefox 64 bit
4.18 Preview 2 Firefox 64 bit
4.18 Preview 2 Chrome 64 bit
This is a known issue in current UE 4.17 version, but it should be fixed for future releases. The issue originates from the Emscripten compiler library that UE4 uses, where it has been fixed in upstream.
To manually work around this issue, you can try editing the runtime .js file of the build (the small one, not the huge .asm.js one), and locating where it has a line like “e.preventDefault();” or a “event.preventDefault();” or something similar close to where keyboard events are being handled, and comment that out. That will allow text boxes to receive keyboard input.
In order to get the kind of mouse activates and deactivates keyboard focus between the canvas and a form input -behavior, unfortunately there might not be other way than to wait for until UE4 gets a newer Emscripten version where that is fixed.
Hi juj!
Your suggestion of manual fix works! However clicking back on the canvas doesn’t remove focus (the blinking cursor and the ability to keep typing in it) from the text box, so clicking anywhere other than the canvas will remove focus (and the blinking cursor and ability to type in it) from the text box. This behavior is good enough I think for now as I don’t have any game logic bound to any of the alphanumeric keys, although I’ll have to manually do the fix each time I build for HTML5.
For anyone else following this, look in the file in your HTML5 build called projectname_asm.js (not .asm.js). There’s 35 counts of preventDefault, but the first one is the one that you want. Comment out that first preventDefault code. For me it looks like this:
...
stringToUTF8(e.locale?e.locale:"",JSEvents.keyEvent+88,32);stringToUTF8(e.char?e.char:"",JSEvents.keyEvent+120,32);HEAP32[JSEvents.keyEvent+152>>2]=e.charCode;HEAP32[JSEvents.keyEvent+156>>2]=e.keyCode;HEAP32[JSEvents.keyEvent+160>>2]=e.which;var shouldCancel=Module["dynCall_iiii"](callbackfunc,eventTypeId,JSEvents.keyEvent,userData);if(shouldCancel){/*e.preventDefault()*/}});
...
Notice at the end I added the block comment /* */ around e.preventDefault(). As a heads up, while typing in a text box, all of those keypresses are still being sent to the UE4 canvas in addition to the text box.
I hope UE4 upgrades to a newer version of Emscripten soon!
As always juj, you’re an amazing wealth of knowledge and I appreciate your time explaining these things 
4.18 removes the *_asm.js file. Any suggestions on how to remove the keyboard focus from the canvas until the UE4 Emscripten version gets updated?
In wasm build, the same JS runtime glue file is still present, but it comes without the “_asm” suffix iirc.
Ah found it. Just projectname.js. Thanks juj!