Prevent p5.dom.js input widget generating keyPressed() events

p5.js Coding Questions
1

Ciao tutti. I’m using a p5.dom.js “input” widget to get some text input, but each character entered generates a call to keyPressed(). I only want to action the input when CR is typed at the end. Example at: https://editor.p5js.org/grege2/sketches/eSnIjDiOm

I’ve done all the searching I can think of: Reference pages, examples, search this forum, search the web. Usually there’s a configuration control on a text-type widget of any technology (Motif, Tk, Java etc.) to control whether each character entered generates an event, or whether it’s a relatively “silent” widget which only reports when Enter or Tab etc. are pressed. But I can’t find it for p5.dom widgets.

Some more context - in my real app, I have other keyPressed() events on many keyboard keys, and they’re firing erroneously while I type in the Input widget.

No doubt the solution is obvious, but it’s evading me at the moment.

Thanks for any help,
GE.

1 Like
2

I still couldn’t figure out what’s the exact scenario you’re dealing w/. :see_no_evil:

Anyways, perhaps you should set a global flag to indicate whether your input element is currently on focus or not.

Let’s name it onFocus: let onFocus;

Inside your keyPressed() callback, after the if (keyCode === ENTER) { block, check out onFocus, and ignore everything else as long as it is true:
else if (!onFocus) console.log("Unwanted key event:", key);

W/ the check statement above, as long as onFocus is false, no log()'s gonna happen.

Within setup(), assign callbacks for the focus & blur events for your input element, so they can set the state of onFocus global variable:

in1.elt.onfocus = () => onFocus = true;
in1.elt.onblur = () => onFocus = false;

It’s as far as I could think about for now. Good luck! :four_leaf_clover:

1 Like
3

Great, thanks. I hadn’t thought of that. Dumb. Will report back.

4

Ok, that works fine. The onfocus and onblur events allow me to ignore the keystroke events.

Here’s the updated example: https://editor.p5js.org/grege2/sketches/eSnIjDiOm

Thanks again GoTo.
GE.

1 Like