Have you considered using the Input mask property for your text box? See https://docs.mendix.com/refguide7/text-box/#input-mask-only-in-web-forms for details
The input-mask is probably what you need. But to answer your question ‘how to do it’:
- create a “JavaScript action” that you provide with the Javascript that removes the unwanted characters;
- expose it as a nanoflow
- add the nanoflow to the input-field as on-change event
This is a classic one – you can use an on-change microflow that is triggered every 300 miliseconds, in which you do a replaceAll() in which you use a regEx. That being said, it is probably better to validate the string, checking if there are no letters in there, and then use a validation feedback activity to return that information. Likewise the user does not become frustrated by us replacing elements blindly, and we kindly ask for the right information.
Good one! However, I'd say that the input mask itself does not communicate enough detail to the user on what needs to be filled in; I'd add a proper example in the placeholder text as well.
(placeholder text showing)
(cursor in/focus on the field, but nothing filled out – feels too vague for me)
(partially filled out – but when I type a letter, nothing happens – I am not getting any feedback. That's bad Ux ;-))
Concluding: I'd go for a clear description of what is required + a proper placeholder text. Personally, I'd prefer a validation message as a user, over struggling with a field that doesn't do what I want it to.