Text area inside a scene.

Phaser 3
1

Hello,
how to (best without using third party plugins) add a text area to a scene?

I tried this:

    const textarea = this.add.dom(400, 300).createFromHTML('<textarea id="user-input" style="width: 300px; height: 100px; position: absolute;"></textarea>');

    if (textarea) {
        console.log('DOM Element created successfully');

        const inputElement = textarea.node as HTMLTextAreaElement;

        if (inputElement) {
            console.log('Textarea element found via textarea.node');
            inputElement.placeholder = "Type something..."; 

            inputElement.style.position = 'absolute'; 
            inputElement.style.top = '50%'; 
            inputElement.style.left = '50%';
            inputElement.style.transform = 'translate(-50%, -50%)'; 
            inputElement.style.zIndex = '100'; 
            inputElement.style.color = 'black'; 
            inputElement.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
        } else {
            console.error('Textarea element not found in the DOM via textarea.node');
        }
    } else {
        console.error('Failed to create DOM Element');
    }

And I get a proper message in the console Textarea element found via textarea.node but the text area does not appear in the scene - just black background.

I can create simple text nodes with this.add.text(width * 0.1, height * 0.1, 'col1text1', { fontSize: '16px', color: '#ffffff' }); and I can see them.

2

:wave:

class Example extends Phaser.Scene {
    create() {
        const textarea = this.add.dom(400, 300).createFromHTML(`<textarea
  id="user-input"
  placeholder="Hello"
  style="
    width: 200px;
    height: 100px;
    color: black;
    background: rgba(255, 255, 255, 0.8);
  "
></textarea>`);
    }
}

new Phaser.Game({
    parent: document.body,
    width: 800,
    height: 600,
    dom: { createContainer: true },
    scene: Example
});

You need dom.createContainer and parent in game config.

For DOMElement nodes you don’t want to set any layout styles except width and height, because Phaser needs to position it within the DOM container. To change its position you set x and y like other game objects.