Inputmask: Dynamically changing mask based on number of entered characters

[carylewis]

I want to be able to handle telephone numbers of the following form:

1-123-456-7890
123-456-7890
456-7890

I tried using this mask:

inputmask({"mask": ["[phone]",
"1-[phone]",
"999-9999"], "keepStatic": false, "clearMaskOnLostFocus": "true", "skipOptionalPartCha
racter": " ", "greedy": true, "removeMaskOnSubmit": true, "autoUnmask": true });

but if the user types in something that doesn't start with a 1, then the 999-9999 mask is applied, and you can't type any more characters after the 7th digit. Adding optional digits to the end doesn't help - the mask doesn't flip to the [phone] mask after the user enters the 8th digit.

So, is there a way to dynamically apply a mask while a user is typing in the field?

[RobinHerbots]

@carylewis ,

Can you create a jsfiddle. I will look into it as soon as time allows.

[RobinHerbots]

Hi Cary,

I'm already working on it. The alternate fn can't handle this case. I
will submit some fix soon.

Op di 26 jul. 2016 om 17:32 schreef Cary Lewis [email protected]:

I went ahead and wrote some code that runs on keyup, that dynamically
updates the input mask based on whether the field contains a 1 at the
beginning, and how many characters are in the field, and this works great.

But if the user attempts to backspace, and the field contains less
characters than it did, the input mask is recalculated by the keyup
function, but the mask doesn't seem to apply.

e.g. once a 1-[phone] is applied, trying to apply a mask of
999-9999[9] doesn't work, the field displays the old mask: _-(___) _-__

If I do a remove mask, that works, but I still can't apply the new mask.

There must be some internal property that isn't being cleared.

Here is the code that sets the mask

$(t).inputmask({"mask": m, "keepStatic": true, "clearMaskOnLostFocus": "true", "skipOptionalPartCharacter

": " ", "greedy": true, "removeMaskOnSubmit": true, "autoUnmask": true });

I pass this into a function

—
You are receiving this because you were assigned.

Reply to this email directly, view it on GitHub
https://github.com/RobinHerbots/jquery.inputmask/issues/1336#issuecomment-235306107,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AATb79Ya1raTyj723wrBawLpZrte4JToks5qZiiFgaJpZM4JRMuw
.

[carylewis]

You're welcome to my workaround code.

On Jul 26, 2016, at 5:36 PM, Robin Herbots [email protected] wrote:

Hi Cary,

I'm already working on it. The alternate fn can't handle this case. I
will submit some fix soon.

Op di 26 jul. 2016 om 17:32 schreef Cary Lewis [email protected]:

I went ahead and wrote some code that runs on keyup, that dynamically
updates the input mask based on whether the field contains a 1 at the
beginning, and how many characters are in the field, and this works great.

But if the user attempts to backspace, and the field contains less
characters than it did, the input mask is recalculated by the keyup
function, but the mask doesn't seem to apply.

e.g. once a 1-[phone] is applied, trying to apply a mask of
999-9999[9] doesn't work, the field displays the old mask: _-(___) _-__

If I do a remove mask, that works, but I still can't apply the new mask.

There must be some internal property that isn't being cleared.

Here is the code that sets the mask

$(t).inputmask({"mask": m, "keepStatic": true, "clearMaskOnLostFocus": "true", "skipOptionalPartCharacter

": " ", "greedy": true, "removeMaskOnSubmit": true, "autoUnmask": true });

I pass this into a function

—
You are receiving this because you were assigned.

Reply to this email directly, view it on GitHub
https://github.com/RobinHerbots/jquery.inputmask/issues/1336#issuecomment-235306107,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AATb79Ya1raTyj723wrBawLpZrte4JToks5qZiiFgaJpZM4JRMuw
.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[RobinHerbots]

@carylewis ,

The latest version on github with this mask will do

Inputmask(["999-9999", "[phone]", "1-[phone]"]).mask(selector);

[carylewis]

I tried your latest code - there is still and issue:

I need to support phone numbers of form:

444-4444
444-444-4444
1-444-4444
1-444-444-4444

If I add "1-999-9999" to your list of masks, then as soon as I type in a
'1' at the beginning of the field the following is displayed:

(144) 488-88__

In my workaround code, I use the length of the inputted value and whether a
1 is present and if the length is greater than 8, I set the mask to
"1-[phone]".

The code is below.

if( $(this).val().substring(0,1) == "1" )

    {

            if($(this).val().length > 8 )

                    setPhoneMask(this, ["1-[phone]"]);

            else

                    setPhoneMask(this, ["1-999-9999[9]"]);

    }

    else

    {

            if($(this).val().length >= 8 )

                    setPhoneMask(this, ["[phone]"]);

            else

                    setPhoneMask(this, ["999-9999[9]"]);

    }

On Thu, Jul 28, 2016 at 5:39 AM, Robin Herbots [email protected]
wrote:

@carylewis https://github.com/carylewis ,

The latest version on github with this mask will do

Inputmask(["999-9999", "[phone]", "1-(999)
999-9999"]).mask(selector);

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/RobinHerbots/jquery.inputmask/issues/1336#issuecomment-235848107,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkAvRYFsz62YrjuEvPInkI-3TQFkZgvks5qaHjlgaJpZM4JRMuw
.

[RobinHerbots]

Try with

Inputmask(["999-9999", "1-999-9999" ,"[phone]", "1-[phone]"]).mask(selector);

[carylewis]

That doesn't work:

Users should be able to enter in numbers like: 9057773637 and the masked
field should display:

(905)-777-3637, but instead, it's displaying:

1-(905)-777-3637

The 1 at the beginning should be optional.

On Thu, Jul 28, 2016 at 5:53 PM, Robin Herbots [email protected]
wrote:

Try with

Inputmask(["999-9999", "1-999-9999" ,"[phone]", "1-(999)
999-9999"]).mask(selector);

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/RobinHerbots/jquery.inputmask/issues/1336#issuecomment-236036607,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkAvbyomR3TKIwDcOqQa33iNcVN4_5bks5qaSS9gaJpZM4JRMuw
.

[RobinHerbots]

@carylewis ,

Have a look at https://jsfiddle.net/quojfkkh/1/

[RobinHerbots]

@carylewis ,

Can this be closed?