Creating Input element

[buryo]

Hi,

I've found some old examples where people use 

document.createElement("input");

and add it to the stage. 

I'm getting the following error:

Quote

TypeError: Cannot set property '_parentID' of undefined

export default class UI {
    constructor(app, CANVAS_WIDTH, CANVAS_HEIGHT) {
        this.app = app;
        this.CANVAS_WIDTH = CANVAS_WIDTH;
        this.CANVAS_HEIGHT = CANVAS_HEIGHT;
        this.graphics = new PIXI.Graphics();
        this.textField();
    }

    textField() {
        this.domField = document.createElement("input");
        this.domField.type = "text";
        this.domField.style.position = "absolute";
        this.app.stage.addChild(this.domField);
    }
}

 

 

[Exca]

You can't add dom elements to pixi stage. You could add it on top of the canvas and use it as a regular input. Do you have a link for the example that has dom mixed with pixi stage?

It could be that there's some library that allows thatkind of methods.

[ivan.popelyshev]

Here's a plugin: https://github.com/Mwni/PIXI.TextInput

[buryo]

10 hours ago, ivan.popelyshev said:

Here's a plugin: https://github.com/Mwni/PIXI.TextInput

 

Hey Ivan , I've looked into this plugin but it's not possible yet to use it with React.

see issue:

https://github.com/Mwni/PIXI.TextInput/issues/5

[ivan.popelyshev]

OK, got it, I'll get someone here who speaks React-ish.

[jkanchelov]

I am not sure if this is correct, but I guess @buryo is using some module bundler ( webpack / browserify ) and he cannot easily consume the PIXI.TextInput class in its current state.

I would go with a fork of the repo and make a pull request in a few days ( when I finish with my current work ) if this is the problem

[ivan.popelyshev]

Mwni just said that he's experimenting with bundlers: https://github.com/Mwni/PIXI.TextInput/issues/5

[buryo]

Has someone worked with this before? I've made my own Input plugin the only problem is the screen size, I can't figure out how to calculate that

https://i.imgur.com/sO3FzMI.png

https://i.imgur.com/nwdXm9v.png

Mwni is doing some calculations on screen resize: https://manuelotto.com/opensource/PIXI.TextInput/demos/demo_default.html

[buryo]

How I fixed this:
 

I've put the input and canvas in the same div (this is the parent div) and set the parent div to Relative

Set the input field to Absolute, and now you can put it where you want with Top and Left

[geronika2004]

please, do not use input inside canvas, on mobile devices canvas input will not zoom in and leads to poor UX implementation. always make popup html windows with ordinary input elements and styled with css.