How to use input mask plugin with alias

#1

Hi I’m using the plugin RobinHerbots/Inputmask and I’ve followed the following guidance https://github.com/RobinHerbots/Inputmask/wiki/Howto:-Effectively-using-the-data-inputmask-attribute

So my javascript code looks like

$('[data-inputmask]').inputmask();

Inputmask.extendAliases({
 'euro': {
   mask: "999-999-999"
 }
});

and this is my html

<input type="text" data-inputmask="'alias': 'euro'" />

The problem is when I move over the input field i get the word euro instead of the input mask, do you know why?

1 Like
#2

I think the issue is with the order in which you define the mask alias and apply it - you define it after applying to the input which doesn’t apply to already instantiated instances.

change your code to be:

Inputmask.extendAliases({
 'euro': {
   mask: "999-999-999"
 }
});
$('[data-inputmask]').inputmask();

and this should work.

#3

Hi @chilledoj thanks for your reply, I’ve tried your solution but still get the same result :frowning:

#4

Do you have any simple code example?

I have it working in a jsfiddle:
https://jsfiddle.net/chilledoj/6htpek2g/1/

If you swap the order of the commands in that jsfiddle you get the result you mention. Is there anything being logged to the console?

1 Like
#5

Hi @chilledoj yes you are right it does work fine, it was my fault sorry.
Can I ask something else? I need to use the input mask to show the percentage and I’ve found this code

$("input").inputmask("decimal", {
    radixPoint: ".",
    groupSeparator: ",",
    autoGroup: true,
    suffix: " %",
    clearMaskOnLostFocus: false
});

How can I adapt it to work with data-inputmask? Many thanks

1 Like
#6

It depends how you want to use them. The library allows you to define some global settings, as per what you had previously.

Inputmask.extendAliases({
...
});

Or you can just pass in the relevant selector for the specific input in that code you have.

$( /* [YOUR DOM SELECTOR HERE ] */ ).inputmask("decimal",...)

One thing to note is that you can “extend” the aliases that are built-in to the library by defining a new one with a reference to the built-in using the alias config.

Inputmask.extendAliases({
  "pct": {
  	alias: "decimal",
  	radixPoint: ".",
  	groupSeparator: ",",
  	autoGroup: true,
  	suffix: " %",
  	clearMaskOnLostFocus: false
  }
});

I’ve updated the example jsfiddle, so take a look there.