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?
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.
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.
It’s partly modelled on how Unity does it on mobile: Unity - Manual: Mobile Keyboard
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 !
I believe it does that already
You will need to modify the code if you want more specific behaviour
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 ?
Can you provide an example please/video of what you mean please? I’m really not sure what you are asking for here.
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.
The library has UiInputField.value which is the property that should be used to read the value: https://playcanvas.com/editor/code/1005906?tabs=109692056
The HTML input field should not be used to read the value of the text field.
Oh, you are talking about while you are typing, the value is still the old value. In which case, this library doesn’t support that. It only gets the value of input box when the user is done.
No i was talking exactly about the “value” property and building an example on tutorial project i saw that it works as expected, so I have to understand why in my project it doesnt set the value on Unfocus, to be continued 
thank you
I noticed that the input field does not resize when resizing the browser to a larger size. Any way to fix this?
