rexrainbow / phaser3-rex-notes

Notes of phaser3 engine

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

rexInputText can still get focus when the dialog pops up

cydd007 opened this issue · comments

Create rexInputText in scene

scene.add.rexInputText(left+formwidth/2-50, top+formheight/2+70, 300, 40, {
            fontSize: 18,fontFamily:'sans serif',
            border: 1,
            type: 'number',
            backgroundColor: 'transparent',
            borderColor: '#472d17',
            borderRadius: '5%',
            placeholder:''
        }).on('textchange', function (inputText:any) {
            //
        }).on('keydown', function (inputText:any, e:any) {
            if (e.key === 'Enter') {
                inputText.setBlur();
            }
        });
  show(that:any,width:any,height:any) {
        var bg=that.add.image(0,0,'test').setOrigin(0, 0)
        var dialog= this.CreateDialog(that,width,height)
            .modalPromise({
                defaultBehavior: false,
            })

        return dialog;
        
    },
    CreateDialog(scene:any,width:any,height:any) {
        var dialog = scene.rexUI.add.dialog({
            origin:0.5,
            content: scene.add.text(width/2, height/2, 'Loading......', {
                fontSize: '24px',fontFamily:'sans serif'
            }),
            actions: [
            ],
            align: {
                actions: 'center', // 'center'|'left'|'right'
            },
            expand: {
                content: false,  // Content is a pure text object
            }
        })
        dialog.depth=1000
        return dialog;
    },

I used the above code to create a pop-up window. When the subform pops up, rexInputText can still get focus and can enter text. Why?

commented

Because that, rexInputText is a DOM game object, which will place above game canvas, i.e above all game objects of all scenes.
On the other word, designer can't put any kind of game object above a DOM game object.
More detail...

You can try canvasinput, which using invisible Input DOM element to receive character input.