[SOLVED] Text input in a 2D screen

I am making a simple menu and I need a text input field where the player can quickly type a name and join the game and I don’t know how to achieve that, what do I need to do? right now I am searching the tutorials

As far as I know there is no text input field in PlayCanvas. You can make one by yourself with an HTML overlay. Below a link to a starters kit for this that it’s made by @Leonidas, but this one is not for free.


1 Like

add this into suggestions and feedback PLEASE

is there a tutorial or forum code that talks about HTML overlay based text input?

Here is an example project of using HTML/CSS. I hope this gets you started.


1 Like

Text input is tricky. The way I would approach it would be similar to unity have a HTML element that appears above the keyboard. And the when enter is pressed, the value gets passed to the text element in the game.

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.