Block some characters in a textbox

0
Hi, I have to write in a textbox the phone number and I want it to only write inside the textbox if I put a number. In case of writing a letter it should not appear in the textbox. I only want them to appear when you press a number. I'm trying to do it with the HTMLSnnipet but I can't do it.  Does anyone know how to do it ? Thanks
asked
4 answers
1

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

answered
0

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.

answered
0

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.

answered
0

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

answered