[SOLVED] Text input in a 2D screen

Hello @sir_akc. Today I saw a text input field on this sample project of @commention. I think this can be very useful for you, me and others.


Hey is there a way to set a character cap with playcanvas ui components

I highly recommend buying input from this site: https://pic.pirron-rodon.one/
Support was great, and it works on any platform

1 Like

The thing is I’m broke

Plus I’m already using the playcanvas UI components so it makes more sense just to edit that

What is it?

A way to limit how many characters can be entered

I gave it a try and below is what works for me.

if (this.element.value.length > 5) {
    this.element.value = this.input;
else {
    this.input = this.element.value;

I store the input of the user in a variable and I block new input with this if the user is over the limit.

I have applied the solution above in the example below.


I add a inputLimit attribute to the input script so you can apply a limit for each inputfield.
If the inputLimit attribute is set to 0 there is no limit for that inputfield.



hey @Albertos the first reply worked great I made a couple minor adjustments and implemented it into my game.

1 Like

Great! Thanks for letting me know!

Hey @Albertos,
thanks for the Input example.

I made a fork but when I launched the project nothing happend.
When I use your original project it’s the same. Only the pre-published project (Play-Button) is working.

Any ideas what’s wrong or missing?

Hi @jro! Thanks for reporting. Since the project itself has not changed, it must be related to a change elsewhere. I will look into it as soon as possible.

Edit: I just checked the original project of @commention and that project still seems to work correctly.


The problem was that I enabled Device Pixel Ratio for testing and forgot to disable it after testing. Also the original project will not work with Device Pixel Ratio enabled.

Hey, thank you for your help!

Just wanted to post that I found the problem with Device Pixel Ratio in Rendering.
Now I see your post about it :slight_smile:

I definitely need DPR, if I switch it off my scene looks blurry.
Bad luck.

1 Like

See Office Hours below for working through this problem. Jump 5:42 for the start of the answer

The HTML elements are position in CSS pixel units but the PlayCanvas elements screen corners will use screen coordinates which will be dependent on the device pixel ratio.

Fixed project: https://playcanvas.com/project/877545/overview/UIComponents%20with%20DPR


A post was split to a new topic: Cem’s UI HTML elements don’t work with rendering fill mode keep aspect ratio

Thanks for this. I was starting to think I was going to have to implement the form screen with pure HTML/CSS. You saved me from massive pain and suffering.

@commention did the hard work and kindly shared the code. I just fixed it up for Device Pixel Ratio.

1 Like

A post was split to a new topic: How to stop canvas resizing when mobile keyboard is in use?