Table of contents

InputMask

Use an input-mask to create an input element with ensuring a predefined format input.

About

New in 4.4.0

Currently, for desktop browsers only because it works through the keydown event, and use event.code, event.key properties. For browsers on mobile, this component doesn't initialize.

An input-mask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ... You can use input-mask with role input, and with core input element.


                    <input class="mt-1" type="text" data-role="input, input-mask" data-mask="+380 (__) ___-____">
                    <input class="mt-1" type="text" data-role="input, input-mask" data-mask="**** **** **** ****" data-mask-placeholder="*">
                    <input class="mt-1" type="text" data-role="input, input-mask" data-mask="__/__/____">

                    <input class="mt-1" type="text" data-role="input-mask" data-mask="____-_AB_-_CD_-____" data-mask-pattern="\w">
                

Options

Events

onChar

You can use event onChar to replace entered character.

Enter any characters. Char x will be changed to Y, and others chars to Z.


                    <input type="text"
                           data-role="input, input-mask"
                           data-mask="____-_AB_-_CD_-____"
                           data-mask-pattern="\w"
                           data-label="Custom:"
                           data-on-char="changeChar"
                    >

                    <script>
                        function changeChar(char) {
                            if (char.toLowerCase() === "x") {
                                return "Y";
                            } else {
                                return 'Z';
                            }
                        }
                    </script>