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
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.
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
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
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?
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.
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?
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.
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.
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.
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 ;_;.
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.
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 !
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 ?
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.
