Masked TextField

Vaadin 6 / 7 / 8 Framework UI
1

What about masket TextField?
Anyone is using an alternative widget?
I have’nt found it iet.
Some ideas?

Thankz

2

Try:

textField.setSecret(true);
3

Sorry about my poor english.
What i was really talking about is a formatted textfield, like a fone number… ‘###-####’
I havent found that funcionality yet.
Any ideas?

4

There’s the
CSValidation add-on
 that does much what a masked field would do. It doesn’t have an input prompt though.

5

How i would use it?
Any other ideas people…
I think its a basic function, i wonder why Vaadin team havent developed such a function.

Thankz

6

See the code examples, the demo, and the API documentation on the
add-on page
.

It doesn’t use mask patterns like a masked textfield would, but regular expressions (or JavaScript). The result is much the same though.

7

Hi,

You could also use PropertyFormatter class. You can set that as property datasource. For example:


public class FormattedTextField extends TextField {

    public void setPropertyDataSource(Property newDataSource) {
		super.setPropertyDataSource(new PropertyFormatter(newDataSource) {
			
			@Override
			public Object parse(String formattedValue) throws Exception {
				//parse here
                return formattedValue;
			}
			
			@Override
			public String format(Object value) {
				//format here
				return String.valueOf(value);
			}
		});
	}
}
  • pete
8

Do you hava an example how i use it directy to text field?
It’s hard to understand, no simple examples found in site.

Tkz

9

Please see the
FillEditor.java
 example, it uses both PropertyFormatter and CSValidatedTextField; the former to format the text string for a text field and the latter to validate it. It uses
DoubleDecimalFormatter
, etc.

You can see it in action in the
on-line demo
. Select English for the language, log in as demo/demo, and select a car and a fill.

10

Hello,

I have a MaskedTextField component almost ready, but I still need to fix a bug in order to publish it in Addons Directory, as well as to finish the demo application.
Its apply the mask as you type and support numbers, converting input to uppercase or lowercase, alphanumeric, hex, and literals within the text.

Using it can be easy as:


new MaskedTextField("My phone TextField", "+55 (##) ####-####");

I think that in 2 days or so it will be ready =)

Anderson Freitas

11

Excellent, the MaskedTextField will be a really useful component.

12

NICE!

I Will wait for this :smiley:

13

Sounds friggin brilliant! We actually have the same component in our roadmap for Vaadin 7, but you’ve gone and done that for us.

Can’t wait to try it out!

14

It wold be really great if we have an native functionality for this in vaadin.
Also we need some number masked input, like internet banking sites, that insert number values from right to left.

Bye

15

do you mean entering currency and numbers with thousand separators?

16

Yes, exactly.

When you will release your MaskedTextField??

Thanz

17

Hi everyone!

It was just released on the Vaadin addons directory:


http://vaadin.com/addon/maskedtextfield

If anyone happen to find any bug please let me know and I’ll try to fix it as soon as possible.

:smiley:

18

Hi,

looks very good so far.

What do think about adding some of these features too:

  • ability to get/set the unmasked value, i.e. making it valid to add a value “123.4” to a field masked as “###.## $” . Getting the value should then retrieve “123.40”.
  • if an invalid value for the current mask is applied
  • automatically select all text when entering or clicking the field or at least postion the cursor to the left of the data
  • allow selection of the text using keyboard controls

Btw, input behaviour is a little strange, when you select part of the text in the field with the mouse an then hit a valid key. This just changes the character at the starting position of the selection leaving the rest of the previously selected text untouched and deselected.

Great job so far, keep it going
Andreas

19

Hi,

I hope you are still working on this? It looked very promising…
Vaadin surely needs masked & formatted in- and output.

Cheers
Andreas

20

Hi Andreas,

Yep, I’m still working (but limited to only some hours per week) on a new version with some improvements and planning to release soon.

But if anyone is using it and face a bug on the current version, let me know and I’ll try to fix asap.

Cheers.

Anderson