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

**URL:** <https://discourse.processing.org/t/prevent-p5-dom-js-input-widget-generating-keypressed-events/13019>\
**Category:** Coding Questions\
**Created:** [July 27, 2019, 10:24pm UTC](https://discourse.processing.org/t/prevent-p5-dom-js-input-widget-generating-keypressed-events/13019 "2019-07-27T22:24:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [July 27, 2019, 10:24pm UTC](https://discourse.processing.org/t/prevent-p5-dom-js-input-widget-generating-keypressed-events/13019/1 "2019-07-27T22:24:39Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 27, 2019, 11:36pm UTC](https://discourse.processing.org/t/prevent-p5-dom-js-input-widget-generating-keypressed-events/13019/2 "2019-07-27T23:36:24Z")

</div>

> [@grege2](#):
>
> , I have other **keyPressed()** events on many keyboard keys, and they’re firing erroneously while I type in the Input widget.

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

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:

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

```

> **[Element: focus event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event)**
>
> The focus event fires when an element has received focus. The event does not bubble, but the related focusin event that follows does bubble.

> **[Element: blur event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event)**
>
> The blur event fires when an element has lost focus. The event does not bubble, but the related focusout event that follows does bubble.

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

---

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [July 27, 2019, 11:39pm UTC](https://discourse.processing.org/t/prevent-p5-dom-js-input-widget-generating-keypressed-events/13019/3 "2019-07-27T23:39:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [July 28, 2019, 11:44pm UTC](https://discourse.processing.org/t/prevent-p5-dom-js-input-widget-generating-keypressed-events/13019/4 "2019-07-28T23:44:35Z")

</div>

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](https://editor.p5js.org/grege2/sketches/eSnIjDiOm)

Thanks again GoTo.  
GE.