textbox on canvas, how to show virtual keyboard on IPad/android?

[Rnd-]

Hi guys..

Im trying to make textbox on canvas for profile purpose.

Im using draw rect, draw text, using keyboard events and its works for PC

but Its not works in Ipad / tablet

I dont know how to show the virtual keyboard when my textbox was touch by user

 

anyone ever make textbox on canvas ??

[Gio]

On iOS, you would have to add an actual textbox (an <input> element) to the DOM, and place it behind your canvas, which you can do by setting its z-index via css. When the user clicks your canvas textbox, you call focus() on the DOM textbox, which makes the virtual keyboard appear.

 

There are some caveats though, if I remember correctly the DOM textbox must also have a "position: fixed" css attribute to avoid Safari moving your canvas around, and possibly something else (I did this a while ago, can't remember exactly).

 

Android doesn't mean much... the above method would work in Chrome for Android, and potentially Firefox too, but there are problems with other browsers (Dolphin is a problematic one, iirc). Also other operating systems such as windows phone and firefox OS won't be happy with that method. You would have to detect the useragent, and do something different depending on the browser... I think I ended up using a javascript prompt() on anything that wasn't iOS or Chrome for Android. It was used in this game here (to try it select multiplayer mode and don't log in via facebook).

[Rnd-]

in the end.. I dont find better solution

so Im make my virtual keyboard manually...

thx gio