flyover / imgui-js

JavaScript bindings for Dear ImGui using Emscripten and TypeScript
https://flyover.github.io/imgui-js/example/
MIT License
915 stars 98 forks source link

Keyboard issue #18

Closed semsitivity closed 4 years ago

semsitivity commented 4 years ago

Hi, I'm just trying ImGui on a webpage after a good experience in C++, and that's awesome. The thing is that I start using an InputText, but the text never change in despite of key pressed:

ImGui.InputText(idd, (value = window[idd]) => window[idd] = value );

Is there anything special to do to get ImGui-js to obtain keyboard events, or this some other issue ? Everything looks ok, cursor is changing when focusing the textbox, I registered a window.addEventListener("keydown" which catch events correctly, and ImGui.GetIO() wants keyboard when the field is selected. I have no clue...

eduardtejerocirera commented 4 years ago

I've been struggling with the same issue, until I've recently found out that the canvas in which ImGui renders must have the attribute tabindex set to 1:

<canvas id="output" tabindex="1"></canvas>

That solved it for me.

semsitivity commented 4 years ago

ok, thank you! While mycanvas is fullscreen, I finally keep using a "patched" impgui_impl replacing:

canvas.addEventListener("keydown", canvas_on_keydown); canvas.addEventListener("keyup", canvas_on_keyup); canvas.addEventListener("keypress", canvas_on_keypress); by window.addEventListener("keydown", canvas_on_keydown); window.addEventListener("keyup", canvas_on_keyup); window.addEventListener("keypress", canvas_on_keypress);

That does the job and it's really a pleasure to be able to create so complex application so easily.