Freckles

How to show mobile keyboard in PIXI

Recommended Posts

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 by jonforum

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 by jonforum

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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 by jonforum

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.