Max length of inputtext

Hi everyone,

I want to make a inputfield to let the user put in a day number of a date. But at the moment it is possible to put more than 2 characters in the field. I want to lock it so the user can only put 2 numbers in the field.

Is there a property for that?

https://playground.babylonjs.com/#T67P3A

Hey @JoepDerix

Here is the fix for your demo. https://playground.babylonjs.com/#T67P3A#3 There are actually lots of different solutions for this but this is the approach that I had:

For input text there are many different Observables to block or check the input. For my solution I went with the onTextChangedObservable so we could see what the new text is. If the new value is over 2 characters we revert to the previous.

    let oldText = "dd";
    inputday.onTextChangedObservable.add((newText) => {
        if(newText.text.length > 2) {
            inputday.text = oldText;
        }
        else {
            oldText = newText.text;
        }
    });

Other solutions can be to block any new text input if you are already at 2 characters, however this can lead to issues if you are highlighting all the characters with intention on replacing them. Speaking of blocking input. since it appears that you wish for the user to enter in a date you might want to look at onBeforeKeyAddObservable to only allow number input. https://playground.babylonjs.com/#I1Y5YT#1

Finally here is some additional documention for input text if you want to take a look at other functionalities it has. :slight_smile: The Babylon GUI | Babylon.js Documentation

Let me know if you have any questions and enjoy! :blush:

2 Likes