Directory

← Back

Masked text fields

ClientSide MaskedTextField

Author

Rating

Popularity

100+

Custom Text Field with client-side masking. Created using https://github.com/RobinHerbots/Inputmask . Supports Swing style masks javax.swing.text.MaskFormatter.

Sample code

MaskedTextField field = new MaskedTextField("####-###-###");
//.setId("...") is important and necessary
        field.setId("test");
        add(field);
new MaskedTextField(mask, allowedChars, containsLiteral, placeholder, MaskType.LAZY, MaskFormat.SWING);
For version 1.0.7 It's needed to put file jquery-loader.js to folder /frontend/src/ 
with following code:
    import * as $ from 'jquery';
    window.jQuery = $;
    window.$ = $
Version 1.0.7 is based on CustomTextField. Tested, works well enough, but, unfortunately there are no css. 
Version 2.0.7 is based on TextField. Works fine, some times some bugs with caret position. Will be fixed ASAP. 

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

small npe fixes

Released
2022-07-07
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Vaadin 14 in 1.0.7
Browser
N/A

Masked text fields - Vaadin Add-on Directory

ClientSide MaskedTextField Masked text fields - Vaadin Add-on Directory
Custom Text Field with client-side masking. Created using https://github.com/RobinHerbots/Inputmask . Supports Swing style masks javax.swing.text.MaskFormatter.
View on GitHub

Masked text fields version 1.0.7
minor

Masked text fields version 2.0.0
Removed jquery requirement. Now component based on TextField (com.vaadin.flow.component.textfield) due to some integration problems.

Masked text fields version 2.0.1
small npe fixes

Online