How to show mobile keyboard in PIXI

[Freckles]

I'm trying to make an input module and I need to show the mobile keyboard so that I can go further. 

I'd appreciate any help)

[jonforum]

hum, what about add a html Input + autofocus with maybe opacity:0 or z-index behing your canvas pixiapp, and lisen the onChange ?
Input + autofocus should make appear the mobile keyboard  Input.

 

Edited June 4, 2020 by jonforum

[Freckles]

@jonforum the thing is I've already made the appearance of the input field with several styles. And that took a lot of time from me. I don't want to waste that code

[ivan.popelyshev]

hm.. pixi does deal only with one element - canvas. Of course we are happy to help even if its not related, but @jonforum is right. its all done through html tricks 

[Freckles]

thank you

@ivan.popelyshev I'd like to get some advice. As I said I've created several styles based on the UI design I've got. And as you told me I can't deal with input using just pixi. Can I use JS for that purpose? Or what exactly would you do in this case?

Yet I don't see any problems with desktop version of the project, but invoking the keyboard on mobile is what got me in trouble.

[jonforum]

6 hours ago, Freckles said:

thank you

@ivan.popelyshev I'd like to get some advice. As I said I've created several styles based on the UI design I've got. And as you told me I can't deal with input using just pixi. Can I use JS for that purpose? Or what exactly would you do in this case?

Yet I don't see any problems with desktop version of the project, but invoking the keyboard on mobile is what got me in trouble.

My first approach should look like this but is theory only, maybe you will need play around this logic.
here for you a demo
It's a basic code, but the logic seems to me theoretically acceptable.

So when you click on a pixi text, you create a html element with opacity 0 and FOCUS()
The keyboard should open and input have event to map value to your Pixi element

Also add a (onblur) events, for destroy the html input elements when click out the focus to remove keyboard.
https://www.pixiplayground.com/#/edit/XLzHze-cY1pc0XdAFatKW
 

ps: I also added some documentation to you, turn the opacity to 0 in demo, you can see is work fine.

Dont forget pixijs are a render and not a UI, so for all UI stuff, you need create your own API for now

Edited June 5, 2020 by jonforum

[Freckles]

On 6/5/2020 at 11:39 PM, jonforum said:

My first approach should look like this but is theory only, maybe you will need play around this logic.
here for you a demo
It's a basic code, but the logic seems to me theoretically acceptable.

So when you click on a pixi text, you create a html element with opacity 0 and FOCUS()
The keyboard should open and input have event to map value to your Pixi element

Also add a (onblur) events, for destroy the html input elements when click out the focus to remove keyboard.
https://www.pixiplayground.com/#/edit/XLzHze-cY1pc0XdAFatKW
 

ps: I also added some documentation to you, turn the opacity to 0 in demo, you can see is work fine.

Dont forget pixijs are a render and not a UI, so for all UI stuff, you need create your own API for now

As for the UI part, it's already done

thanks a lot for your help, I'll try to figure it out

[Freckles]

@jonforum Could you please tell me why you wrote x.focus() in line 25 https://www.pixiplayground.com/#/edit/XLzHze-cY1pc0XdAFatKW

I don't get it as it's called in setTimeout too and works without it as well. I want to make sure I'm not doing a mistake removing line 25.

 

[jonforum]

9 hours ago, Freckles said:

@jonforum Could you please tell me why you wrote x.focus() in line 25 https://www.pixiplayground.com/#/edit/XLzHze-cY1pc0XdAFatKW

I don't get it as it's called in setTimeout too and works without it as well. I want to make sure I'm not doing a mistake removing line 25.

 

ho sorry if this disturbed you !
.focus(); should work
But sometime you will need call .focus(); after the DOM updated your elements. (async)
It why i add both in the example for playground.
setTimeout(function () { el.focus(); }, 1);
will work in all contexts, but if you create a html element and force a instant focus , it can not work in all contexts, it will depending on how you add your update en render your elements in your projet.

Edited June 10, 2020 by jonforum