How do I get a mask token as part of the prop mask value?

[rhscjohn]

For a q-input field of text, I want to set the prop mask="##px". The problem is that the ‘x’ is also defined as a mask token: x - Alphanumeric, transformed to lowercase for letters.

Is there some way, maybe an escape sequence, that will not treat the x as a mask token.

Thanks

[beets]

@rhscjohn This seems to work for me:

mask="##p\x"

But are you sure in this case, an input suffix isn’t better? https://quasar.dev/vue-components/input#Prefix-and-suffix

[rhscjohn]

@beets I tried using suffix but the suffix(px) never got appended to the input value. When I inspected value, it would just contain the 2 digits. It’s possible I did not do something correctly or I don’t understand the purpose of suffix/prefix. I opened the codePen demo, added a line of code: {{email}} to display the value of email. The suffix @gmail.com never appeared in {{email}}.

[beets]

@rhscjohn That’s correct the suffix isn’t applied to the input value, but if you already know what it should be, it’s easy enough to just add the suffix when you need it. I.e. if the input has v-model="input" then just use this.input + 'px'.

It’s also possible to add a dropdown as a suffix with a slot so users could select ‘px’, ‘em’, ‘pt’, etc. Depends on your usecase, but I find masks less user friendly in this sort of situation.

In anycase, did mask="##p\x" work for you? If so and it works for use case there’s no need to overthink it, I was just tossing out a suggestion.

[rhscjohn]

Yes. mask="##p\x" worked. Just trying to figure out what “best practice” would be.

[beets]

@rhscjohn Personally I’d go for the qinput with suffix slot (and number type), as you want to signal to users that they’re entering pixels. And you don’t really require or expect them to have to type ‘px’ themselves. Again just note that whenever you want to use the value, just use this.value + 'px' instead.