Is there a Phaser event for when you type in dom inputs?

I want to know if it’s possible to trigger some function when I type anything inside a dom text box with a Phaser event listener.

The fun thing about Phaser is that it lives in the browser and when you boil it down, it’s all just javascript. You might think of this the opposite way, and rather than using Phaser’s event system (which, though I’m not actually sure, may only listen for events crated by its own system), you could create a listener on the dom element / document that then calls the desired function in your Phaser game.

The game instance is accessible when you create the game, with something like
const game = new Phaser.Game(config);
And you can access everything from your desired scene from this instance
const scene = game.scene.keys.sceneName
And do something like

textareaElement.addEventListener("change", function(event) {
  const text = textareaElement.value;
  scene.updateGameTextFromTextarea(text);
});

But be careful, you’ll have to do your own checks to make sure the scene you’re trying to access is loaded, etc. I’m also not sure if this would be considered bad practice since you’re just injecting a function call at random into an animation loop, and some things are made to be called in a certain order in the game loop, though I’m sure setting static data to a variable wouldn’t be too much of an issue. I’m currently experimenting with this to put some debug / testing controls on the webpage housing my game canvas, but the controls aren’t PART of the canvas, they’re outside!

But wait…

To give yourself a little more Phaser power, especially if this text box is meant to be PART of your game and not live outside the game canvas, you could check out Phaser.GameObjects.DOMElement. This creates a dom element that lives in a layer displayed above (or below) your game canvas, and is a subclass of GameObject so you get all those methods baked in.

It has its own limitations, for example you can’t layer it in front of some drawn elements on the canvas and behind others, because it’s not actually part of the drawn canvas, it’s just sitting on top. But I think this implementation would be far easier and more native than doing it with vanilla javascript.

Here’s a link to the docs page and a whole slew of examples for the DOMElement class, see if that’s enough to get you going!

Class: Phaser.GameObjects.DOMElement
Phaser 3 Examples: DOM ELEMENT

Thank you! your code is exactly what I needed, and thanks for the info too!