Formatted Text Inputs without mask

It could be nice if we can define only allow part of pattern.

pattern:{ allow:/[0-9]/g}

So user can type unlimited numbers.

So it’s not pattern anymore.
If you do that - that’s nothing else than format.
https://docs.webix.com/desktop__text.html#settingnumberformat

It would be nice to have not a “pattern” but a mask, that would prevent to type (or paste) some chars/symbols in the input box.

Hello @JoanaEsteves,

It would be nice to have not a “pattern” but a mask, that would prevent to type (or paste) some chars/symbols in the input box.

While there is no property that works like that at the moment, it is possible to implement the same functionality with the help of the onKeyPress event. Simply put, you can disallow entering certain characters by returning false.

Here is an example: https://snippet.webix.com/ojkkhq1s.

As you can see, the handler receives the KeyboardEvent associated with the pressed button, which means that you can check for the appropriate key codes and base your logic around that.

Thanks Dzmitry,

Have achieved a solution like yours but using regex
https://snippet.webix.com/c7ra6kje

Specify the key code for each char I needed to include, or exclude, would be much time consuming.
Even achievable by onKeyPress event, having this as a property would be great :slight_smile:

Cheers

Have achieved a solution like yours but using regex

Yep, this is a more convenient solution, but please note that you will also need to make a special check for functional keys (like Enter/Space/Shift/etc.), since the e.Key will represent the actual name of the key, and your match statement might will not work for these keys. For example, you could do this: https://snippet.webix.com/s983eent (alternatively - https://snippet.webix.com/1yl35kvu).

As a side note, I would also like to note that if you want to implement a custom component or apply a more complex logic to the overall text pattern, then you should work with the native input of the text component inside of the onAfterRender event handler. Here is an example of such custom component: https://snippet.webix.com/rm0wypss. Try entering a set of numbers and you will note that they will be formatted as a date.

@Dzmitry many thanks for your snippets. Very useful information here!!