Text Input for PlayCanvas UI

Useful Resources
#1

Here is my first pass in adding a way to do input fields for PlayCanvas UI

https://developer.playcanvas.com/en/tutorials/ui-text-input/

ezgif.com-gif-maker (17)

On mobile, the input box appears above the on screen keyboard

To add this to your project, copy the folder ‘ui-input’ and paste to your own project and add uiInputField script to Element Entities that represent the input area.

For an example, copy the Template ‘Text Input Field’ and paste to your own project.

Limitations:

  • Only screen space screens are supported
  • (iOS) Input fields are not interactable for 2 secs after a canvas resize event
  • Only single line input fields are available to type text in

Please let me know if there is anything you want too see added or if there’s a use case that isn’t supported

v1.5

  • Fixed resize bug on desktop where it would change to mobile input style when window was resized

v1.4

  • Fixed desktop ‘in place’ styling for input fields

v1.3

  • Left/Right safe areas are now supported (for notches when in landscape mode)

v1.2

  • Fixed input field width on Firefox Android

v1.1

  • Text input moved to the top (solves many CSS positioning issues on iOS)
  • Enter key hints
  • Added input type decimal as numpad on iOS doesn’t have the .
  • Added workaround where the inputfield no longer used numpad mode after typing a password
  • Placeholder string is also used for the HTML input field

v1.0

  • First release
10 Likes
Adding player names in multiplayer experience
#2

Look great yaustar

Mobile comments:

  • Would it be possible to scroll the canvas so that the current text field is always in view when the keyboard is active?
  • Alternatively, would it be possible make the text input like a modal pop up where the keyboard does not push up the canvas, but overlays the canvas. I’ve seen this requested on the forums previously.
  • Would it be possible for the text input field to display a hint eg “please enter your email” provided as a script attribute?
  • Would it be possible for the user to configure the “return” key to be Done, Go, Search etc.
  • When tapping different text fields of a different type while the keyboard is active the keyboard should update to the new type eg email, numbers, secure etc.
#3

No. iOS and Android have very different behaviours when the keyboard is on the screen and would make this near impossible to do for a full page app. Hence the comprise of a text input field at the (now) top.

Everything else in the list is added as part of v1.1 release

2 Likes
#4

awesome work @yaustar! this will help a lot in our games
Just a question, how secure is the password field right now? does playcanvas still track which buttons are being pressed even while typing in a html password input field?.
I would feel bad if we would publish a game and a bad actor would inject a keylogger into the password field :confused:

#5

It’s just an HTML input field and it’s all on the frontend. You can check through the source code of the project to see if it fits your needs.

#6

It has the same issue described here https://forum.playcanvas.com/t/how-to-stop-canvas-resizing-when-mobile-keyboard-is-in-use/27882 . The canvas resizes once the virtual keyboard shows up. I think that in the most common use case the user doesn’t want the UI to change when the keyboard shows up. That’s why I ended up with a custom html page embedded in the PlayCanvas app via iframe, using custom CSS so that the keyboard wouldn’t change the layout of the page, but instead would just scroll to the input field.

No. iOS and Android have very different behaviours when the keyboard is on the screen and would make this near impossible to do for a full page app. Hence the comprise of a text input field at the (now) top.

It is possible with an embedded HTML at least. You can see the CSS I use on my last reply on that post, maybe something similar could be used/adapted on PlayCanvas as well?

#7

I prefer not to use the iframe as the page is behaving as it should and there would be security concerns from using iframes due to possible attacks.

If developers dont want users to see the resized canvas, they can hide it with a full screen overlay.

Theres no way from the browser to know if the keyboard is on screen to do any bespoke behaviour around resizing the canvas. On top of that iOS and Android behaves differently when the keyboard is on the screen.

1 Like
#8

I see, I thought one of the goals of your text input was to work more like the HTML forms, where the UI doesn’t resize and it scrolls to the input field.

Theres no way from the browser to know if the keyboard is on screen to do any bespoke behaviour around resizing the canvas. On top of that iOS and Android behaves differently when the keyboard is on the screen.

I see, the issue is that PlayCanvas is already configured to automatically resize when the screen dimensions changes, and you can’t tell if it happens because of the virtual keyboard. Is that it? What if it was possible to tell PlayCanvas not to resize the canvas? A way to disable the resizing functionality altogether? So when I was on the form screen, I tell PlayCanvas “ok, no more resizing the Canvas, stop for now.”, then after the form screen I turn it on again. If this was possible, it would already help immensely because then I’d be able to apply this css
iframe.setAttribute("style", "position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:" + window.innerHeight + "px; border:none; margin:0; padding:0; overflow: scroll-y"); temporarily for the form screen and it’d work as expected. Should I make a feature request? Or I shouldn’t bother because it’s not possible?

#9

Nope, just a way to enter text via the PlayCanvas rather than to resort to a pure HTML5 UI/form.

It’s should technically be possible now by changing the fillMode to fixed and giving it the desired height/width: https://developer.playcanvas.com/api/pc.Application.html#setCanvasFillMode

It may need a bit of CSS work that’s been mentioned in this post as switching between fill modes is not a common use case and there may be a few issues: https://forum.playcanvas.com/t/solved-trying-to-switch-between-fill-mode-to-keep-aspect-ratio/26874

However, this doesn’t work in this case of my project because you can hide the keyboard with the input box still up and iOS does funny things with innerHeight/innerWidth.

It would also mean that it could look odd if they hid the keyboard and resized the window, change orientation etc.

#10

I understand. On your text input, is there a way to make it so the input box always shows on top of the field you are filling in, even on mobile? So I can try changing the fillMode + CSS and using your text input to effectively have a form page in PlayCanvas like I explained. Right now even on desktop the input box shows up on the top of the screen instead of the input field itself.

#11

Yes, there is a function called updateStyle that you can modify so that it always uses the canvas corners of the element.

Unfortunately, I don’t know off hand if that takes into account of scroll position of the page (if any) or that fact that the canvas may not taking the whole screen.

#12

Yes, there is a function called updateStyle that you can modify so that it always uses the canvas corners of the element.

Can you expose this as a script attribute boolean? Something like “showUpOnTop”. If ticked, it works like it is right now, if not, it shows up on top of the input field(which is the more natural way imo). I mean on version 1.0 it was working the way I wanted but then you moved it to the top ;_;.

1 Like
#13

Version 1.0 had it at the bottom on mobile. That GIF was from desktop.

The code is completely open so if you need to customise it for your needs, you are more than welcome to. I have coded it the way it is deliberately to reduce as many issues as possible while offering the functionality.

It’s partly modelled on how Unity does it on mobile: Unity - Manual: Mobile Keyboard
image

1 Like
#14

I missed the desktop part of this post:

v1.4

  • Fixed desktop ‘in place’ styling for input fields
#15

Documentation released: User Interface - Text Input | Learn PlayCanvas

1 Like
#16

Hi @yaustar amazing job, as always, thank you.
When using on desktop is needed to press enter in order to update the value of the component, is there a way to manage this alternatively ?
In example, is it possible to set the value by focus/defocus element ?
thanks in advance for any suggestion !

#17

I believe it does that already

You will need to modify the code if you want more specific behaviour

#18

Actually if u move from InputA to inputB, you can see changed text, correct, BUT, if you read input.value it is not updated, so it’s not what u see on screen, do you confirm this ?

I’d love to modify script, which btw is golden code on IOS, im asking a suggestion about focus event, is that reliable ?

#19

Can you provide an example please/video of what you mean please? I’m really not sure what you are asking for here.

#20

If I type “AAA” into an empty field, its value wil be “” until i press enter, after that i will read the correct “AAA” value from script, hope its clear.