InputMask

Component Extension to mask inputs.

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);

Links

• Source Code
• Issue Tracker
• Input Mask javascrit plugin
• Online Demo

Compatibility