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>