# KeyTyped not working until mouse is pressed

**URL:** <https://discourse.processing.org/t/keytyped-not-working-until-mouse-is-pressed/13151>\
**Category:** Beginners\
**Created:** [August 3, 2019, 11:56am UTC](https://discourse.processing.org/t/keytyped-not-working-until-mouse-is-pressed/13151 "2019-08-03T11:56:57Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [August 3, 2019, 11:56am UTC](https://discourse.processing.org/t/keytyped-not-working-until-mouse-is-pressed/13151/1 "2019-08-03T11:56:57Z")

</div>

Hello,

I’ve taken the below code from this example:  
[https://p5js.org/reference/#/p5/keyTyped](https://p5js.org/reference/#/p5/keyTyped)  
and I’m using [openprocessing.org](http://openprocessing.org) as an editor, if that’s helpful in this situation.

In order to be able to get the sketch to respond to a key being pressed, I first have to click on the square. Nothing works until I do that. Does anyone have an idea of why that is?

```auto
let color = 180;

function setup() {
	colorMode(HSB);
}

function draw() {
	fill(color, 255, 255);
	rect(25, 25, 50, 50);
}

function keyTyped() {
	if (key === 'q') {
		color = 0;
	} else if (key === 'w') {
		color = 20;
	} else if (key === 'e') {
		color = 40;
	} else if (key === 'r') {
		color = 60;
	} else if (key === 't') {
		color = 80;
	} else if (key === 'y') {
		color = 100;
	}
	return false; // this line prevents any default behaviour
}

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [August 3, 2019, 12:34pm UTC](https://discourse.processing.org/t/keytyped-not-working-until-mouse-is-pressed/13151/2 "2019-08-03T12:34:40Z")

</div>

Guessing that openprocessing is a browser environment like the [Web Editor](https://editor.p5js.org/), which shows similar behaviour. It’s because another part of the browser is selected/focused (might have a specific name, not sure). It’s the same the other way around: after clicking on square and pressing buttons, these characters won’t be added to your text editor hence leaving your code intact.

Does that answer your question?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 3, 2019, 12:40pm UTC](https://discourse.processing.org/t/keytyped-not-working-until-mouse-is-pressed/13151/3 "2019-08-03T12:40:55Z")

</div>

Yeah, the sketch doesn’t have the focus

Maybe tab works too

---

<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:** [August 3, 2019, 1:38pm UTC](https://discourse.processing.org/t/keytyped-not-working-until-mouse-is-pressed/13151/4 "2019-08-03T13:38:08Z")

</div>

> [@SheCurvesMobius](#):
>
> , I first have to click on the square.

In my case, **keyTyped()** works right after I click at the play ▶ 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:

- [My Sketch - OpenProcessing](http://OpenProcessing.org/sketch/create)
- [JsFiddle.net](http://JsFiddle.net)
- [JS Bin - Collaborative JavaScript Debugging](http://JsBin.com/?html,js,output)
- [CodePen.io/pen](http://CodePen.io/pen)

and many others actually run our code inside an `<iframe>` tag:  
[Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe](http://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:

> <https://gist.github.com/GoSubRoutine/fa085945d45152786698f44a9523ccac>

> <https://gist.github.com/GoSubRoutine/fa085945d45152786698f44a9523ccac>

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/](http://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.

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [August 4, 2019, 1:54pm UTC](https://discourse.processing.org/t/keytyped-not-working-until-mouse-is-pressed/13151/6 "2019-08-04T13:54:12Z")

</div>

Thanks so much everyone for your input; this adds a ton of clarity to the problem 🙂

Does anyone know if there is code that can be added that forces the browser to switch to the canvas as the area of the browser that is active?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 4, 2019, 7:45pm UTC](https://discourse.processing.org/t/keytyped-not-working-until-mouse-is-pressed/13151/7 "2019-08-04T19:45:57Z")

</div>

A post was split to a new topic: [Sound in setup doesn’t play from openprocessing](https://discourse.processing.org/t/sound-in-setup-doesnt-play-from-openprocessing/13185)

---

<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:** [August 7, 2019, 7:43am UTC](https://discourse.processing.org/t/keytyped-not-working-until-mouse-is-pressed/13151/8 "2019-08-07T07:43:56Z")

</div>

`frameElement && frameElement.focus();`

> **[HTMLElement.focus()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)**
>
> The HTMLElement.focus() method sets focus on the specified element, if it can be focused. The focused element is the element which will receive keyboard and similar events by default.

  

> **[DocumentOrShadowRoot.activeElement](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)**
>
> The activeElement read-only property of the Document and ShadowRoot interfaces returns the Element within the DOM or shadow DOM tree that currently has focus.

  

> **[Window.frameElement](https://developer.mozilla.org/en-US/docs/Web/API/Window/frameElement)**
>
> Returns the element (such as iframe or object) in which the window is embedded, or null if the element is either top-level or is embedded into a document with a different script origin; that is, in cross-origin situations.

  

> <https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus>