KeyTyped not working until mouse is pressed

p5.js Beginners
4

In my case, keyTyped() works right after I click at the play :arrow_forward: icon.

Only when I click somewhere else, or return from another browser tab, I’d need to click at the square, or within 25 pixels far from it, to regain focus.

That focus regaining is needed b/c most code webhosters like:

and many others actually run our code inside an <iframe> tag:
Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe

And the size of that <iframe> is what actually determines the focus zone for our code.

In the online sketch “Damper Balls” below:

all the balls horizontally follow the mouse as long as the mouse pointer is within the canvas zone, b/c its <iframe> is exactly the same size of that sketch’s <canvas> element.

However, the very same sketch in the alternative link below:
Bl.ocks.org/GoSubRoutine/raw/fa085945d45152786698f44a9523ccac/

all the balls horizontally follow the mouse pointer no matter where it is within the browser’s whole window zone.

That’s b/c this time the running sketch isn’t inside an <iframe> element anymore.

1 Like