EditMask in Vaadin 7?

Hello Everyone!

I’m looking for a ‘EditMask’-like component. I tried
but it didn’t really work for me.

Because what I want is not, that the value gets convertet after some action (i.e. when you hit enter or something like that).

What i want / need is a mask where you see placeholders like
0000 / 00 00 00
and during the user types into the field, the placeholders will be replaced with the user input.

So if I would type ‘6’, the mask should look like
6000 / 00 00 00
If I then would go on with ‘4’ the mask should look like
6400 / 00 00 00
and so on…

The above mentioned AddOn won’t work for me, since the value will not be formatted until some UI interaction happens.

I hope someone can help me!

Greets, Manfred!


I forgot to mention, when I use the entered value I will need it in straight number format like
so this component relly should be just an more user-friendly representation of a long number.


You could extend TextField to add this behavior. With TextChangeListener you can replace the content of the field every time the user change its content.

To format the value, use DecimalFormat with your pattern.

Well I thought there would be an easier way to do this, but I built my own custom component to manage this problem!

But thank you for your reply!

Nice that you have implemented your own component. You can publish it to Vaadin Directory (​https://vaadin.com/directory) if you feel like :slight_smile:

You can find more details here: https://vaadin.com/directory/help/creating-vaadin-add-ons

I think it’s too immature for deployment, but maybe I’ll publish it someday! Currently I sadly have no time for that, sorry!