mask plugin * wildcard does not work as expected

[1isten]

The * wildcard for x-mask mask plugin does not work as expected.

<input x-mask="*999.99" type="text" />

I expect the * to be any character, but it actually works like the a wildcard, which only support alpha characters.

In the above html, I'd like to support input of positive (+) or negative (-) number between 0 to 999.99, but try to input some number like +123.45 or -123.45, the + or - is not allowed.

If this is intended (which I don't think so because any character means not only alpha characters but also characters like +, - should be supported), may I ask is there any other way to support positive (+) or negative (-) number input (without using type="number")?

Package Version

"alpinejs": "^3.10.2"

"@alpinejs/mask": "^3.10.3"

[SimoTod]

that looks like a bug. However, if I understand your requirement correctly, you don't really want '*' because that would allow any invalid character in your string.

Try something like

<input x-mask:dynamic="function(value) { return (value.length > 0 && value.charAt(0) == '-') ? '-999.99' : '+999.99'}" type="text" />

or

<input x-mask:dynamic="function(value) {
                       if (value.length > 0 && value.charAt(0) == '-') return '-999.99';
                       if (value.length > 0 && value.charAt(0) == '+') return '+999.99'; 
                       return '999.99'}" type="text"/>

[1isten]

@SimoTod You're correct. I don't really want *, but I just found out this bug. dynamic function sure is a solution but in my use case if the bug is fixed using * will be simple and enough.

[SimoTod]

The implementation seems to explicitly allow for alphanumeric characters rather than any characters. I don't know what the original intention was and if the issue is with the code or the documentation. I suppose the quickest way to find it out is to send a pull request.

[Menganitou]

Hi there,

Just to mention that viewing the source code of the mask plugin it's seems that "*" wildcard just allows this regex value: /[a-zA-Z0-9]/

// Line 65  https://unpkg.com/browse/@alpinejs/[email protected]/dist/cdn.js

function stripDown(template, input) {
    let inputToBeStripped = input;
    let output = "";
    let regexes = {
      "9": /[0-9]/,
      a: /[a-zA-Z]/,
      "*": /[a-zA-Z0-9]/
    };
	// ....
}

I had the same problem. As a workaround I just copied the minified version and changed the regex value for something like this to allow special characters with alpha characters and numbers:

    let regexes = {
      "9": /[0-9]/,
      a: /[a-zA-Z]/,
      "*": /^[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]*$/
    };

Maybe there is a better regex expression. I just searched at stackoverflow

[Restartz]

Maybe there is a better regex expression. I just searched at stackoverflow

Haven't tested it but I think this might have the same effect:

    let regexes = {
      "9": /[0-9]/,
      a: /[a-zA-Z]/,
      "*": /./
    };

[ekwoka]

yeah, . is the regex equivalent.

Could be worth adding **: /.*/ if you want to make that PR