UI5 input prefix

[former_member966252]

Hello, I'd like to add a prefix to an input field. This prefix should not be editable/selectable by the user i.e. the cursor should simply start at the end of this prefix. This is simply to let the user know how the final input will look like; for example, when creating an e-mail name some websites show the @domain.com behind the user's input. I want exactly that just in front of the input. Does anyone know how I would be able to achieve something like this? Every idea is much appreciated

[AlexGourdet]

Thank you for visiting SAP Community to get answers to your questions.

As you're looking to get most out of your community membership, please consider include a profile picture to increase user engagement & additional resources to your reference that can really benefit you:

• Profile https://developers.sap.com/tutorials/community-profile.html
• Tips for Questions: https://community.sap.com/resources/questions-and-answers
• Consider to take our Q&A tutorial at: https://developers.sap.com/tutorials/community-qa.html.

I hope you find this advice useful, and we're happy to have you as part of SAP Community!

All the best,

Alex

[Margot · Accepted solution]

I would say the Mask Input field is a good fit for what you are describing. Check out the code for the Product activation key field in the corresponding sample, this should be a good start.

[former_member966252 · Accepted solution]

Thanks a lot for the help! I have looked into MaskInput fields and it seems like one has to specify a fixed length of characters but that's not what I want. Do you know any workaround for that?

[former_member966252 · Accepted solution]

Also, there seems to be a bug where the 'a' character is somehow seen as a maskformatSymbol? only happens with that character. Plus, when binding the mask to an object from a model and this value gets updated, the object value gets appended to the mask instead of replaced resulting in very weird behavior. Are you aware of this? If so, how can I fix this?

[n_hristov97 · Accepted solution]

Hi Alex,

Unfortunately sap.m.MaskInput offers only fixed-length mask, so you cannot use it in cases where you need various-length input. For your use case you can use a combination of label and regular input, like in this snippet.

Also, inside you can find how to deal with small 'a' - it is not a bug - 'a' and '9' are default mask rules, where 'a' corresponds on regex "[A-Za-z]", and '9' corresponds on regex "[0-9]". If you want to use these symbols as immutable, you can escape them by prepending with ^ character, something like: mask: "^addon-xxxxxx".

For the problem with binding - I am not sure what is exact case, so can you provide some snippet that demonstrates the issue?

Best Regards

Nikolay Hristov