Directory

← Back

InputMask

Component Extension to mask inputs.

Author

Rating

Popularity

100+

InputMask its a wrapper for the Input Mask javascript plugin that allows the developer to mask Vaddin components with ease. Can be used on TextField, TextArea, InputDate, Combobox, and pretty much any Vaadin component that has a text input.

Default masking definitions

  • 9 : numeric
  • a : alphabetical
  • * : alphanumeric

Sample code

        /*
         * Time
         */
        TextField timeTextField = new TextField("Time:");
        InputMask.addTo(timeTextField, "99:99:99");
        layout.addComponent(timeTextField);
        /*
         * Currency Alias
         */
        TextField currencyTextField = new TextField("Currency:");
        InputMask currencyInputMask = new InputMask(Alias.CURRENCY);
        currencyInputMask.setPrefix("R$ ");
        currencyInputMask.setGroupSeparator(".");
        currencyInputMask.setRadixPoint(",");
        currencyInputMask.extend(currencyTextField);
        layout.addComponent(currencyTextField);
        /*
         * Date Extension
         */
        DateField dateField = new DateField("Date extension:");
        InputMask dateInputMask = new InputMask(Alias.DATE);
        dateInputMask.setPlaceholder("__/__/____");
        dateInputMask.extend(dateField);
        layout.addComponent(dateField);
        /*
         * Mask Definitions
         */
        TextField maskDefinitionTextField = new TextField("Mask Definition(basic Year):");
        InputMask definitionInputMask = new InputMask("Y");
        Definition yearDefinition = new Definition("Y", "(19|20)\\d{2}");
        yearDefinition.setCardinality(4);
        yearDefinition.addPreValidator(new PreValidator("[12]", 1));
        yearDefinition.addPreValidator(new PreValidator("(19|20)", 2));
        yearDefinition.addPreValidator(new PreValidator("(19|20)\\d", 3));
        definitionInputMask.addDefinition(yearDefinition);
        definitionInputMask.extend(maskDefinitionTextField);
        layout.addComponent(maskDefinitionTextField);
        /*
         * Numeric input
         */
        TextField numericInputTextField = new TextField("Numeric Input:");
        InputMask numericInputMask = new InputMask("€ 999.999.999,99");
        numericInputMask.setNumericInput(true);
        numericInputMask.extend(numericInputTextField);
        layout.addComponent(numericInputTextField);
        /*
         * Mask on Combobox
         */
        ComboBox<String> combo = new ComboBox<>("Mask on Combobox:");
        combo.setItems("1-444", "1-667", "2-232", "4-433", "4-431", "1-424", "1-627", "2-332", "4-733", "2-437", "4-124", "2-127", "4-832", "1-933", "4-491");
        InputMask comboInputMask = new InputMask("9-999");
        comboInputMask.setJitMasking(true);
        comboInputMask.extend(combo);
        layout.addComponent(combo);
        /*
         * Upper Casing
         */
        TextArea upperCasingTextField = new TextArea("Upper Casing:");
        InputMask upperCasingInputMask = new InputMask("*{*}");
        upperCasingInputMask.setCasing(Casing.UPPER);
        upperCasingInputMask.extend(upperCasingTextField);
        layout.addComponent(upperCasingTextField);
        /*
         * Regex mask
         */
        TextField regexMaskTextField = new TextField("Regex mask:");
        InputMask regexInputMask = new InputMask("\\d*");
        regexInputMask.setRegexMask(true);
        regexInputMask.extend(regexMaskTextField);
        layout.addComponent(regexMaskTextField);
        /*
         * Callbacks
         */
        TextField callbacksTextField = new TextField("Callbacks:");
        InputMask callbacksInputMask = new InputMask("(999) 999-9999");
        callbacksInputMask.addOnCompleteListener(() -> {
        	Notification n = new Notification("Inputmask complete");
        	n.setDelayMsec(3000);
        	n.show(getPage());
        });
        callbacksInputMask.addOnIncompleteListener(() -> {
        	Notification n = new Notification("Inputmask incomplete");
        	n.setDelayMsec(3000);
        	n.show(getPage());
        });
        callbacksInputMask.extend(callbacksTextField);
        layout.addComponent(callbacksTextField);

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

Released
2017-11-22
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0+
Vaadin 8.0+
Browser
N/A

InputMask - Vaadin Add-on Directory

Component Extension to mask inputs. InputMask - Vaadin Add-on Directory
InputMask its a wrapper for the Input Mask javascript plugin that allows the developer to mask Vaddin components with ease. Can be used on TextField, TextArea, InputDate, Combobox, and pretty much any Vaadin component that has a text input. # Default masking definitions - `9` : numeric - `a` : alphabetical - `*` : alphanumeric
Online