feat: add masking to Text Field

[GamingMaker]

🙋 Feature Request

I thought it would be a great feature to add the option of masking into the Text Field. You could provide a pattern and the textfields behaves according to it. Let me give an example: Pattern = "xxxx.xxxx" and the Text Field gets pre-filled like this: "____x____". Every time the end-user inputs a character, one underscore disappears and the character is in the position. Also: the end-user can't provide more characters than the pattern length and every time he removes one character, the underscore comes back to the position. Also if the pattern is like "dd.mm", the field should only accept valid inputs, unlike for example "51.56", since this is not a correct format.

This would be a nice addition to the text fields, especially for using the text fields in forms.

💁 Possible Solution

You could add a "Pattern" or "Mask" parameter into the Text Field where a user can provide a pattern for the masking. Example: Pattern="dd.mm" and the field gets pre-filled with underscores: "__.__". The maxlength and minlength Parameters should be set to the lenght of the pattern.

🔦 Context

What are you trying to accomplish? -> having a masked text input inside a form.

How has not having this feature affected you? -> i tried implementing it myself but i'm not that experienced and it works in general but could be way better.

💻 Examples

[vnbaaij]

This is currently not possible as it is not supported by the underlying web component.