jquery.maskedinput programmatically set value and apply mask?

Question

I'm using DigitalBush's MaskedInput jquery plugin. I have a simple input box for a phone number:

$('#txt_PhoneNumber').mask('(999) 999-9999');

Sometimes the field is programmatically filled with a non-formated number such as 5551234567. How can I notify the mask input to apply it's mask to "beautify" it's new input?

It does seem that if I reapply the mask that it will "beautify" but if the data is wrong it clears the field. — Corey Ogburn, Dec 18 '13 at 17:20
One more try: `.trigger('keypress.mask')` Here's how it binds in the source: `.bind("keypress.mask", keypressEvent)` — Jason P, Dec 18 '13 at 17:24
From viewing the source, it looks like it works off the keypress event, but doesn't do anything if a keycode isn't sent in. It would probably be easiest to look at that keypress event, figure out what actually does the masking, moving it to it's own function, and exposing the function as a "refresh" — Jason P, Dec 18 '13 at 17:30
I know the question is very old, but as there have been changes in the library I will leave here how this should be done today: `$('#txt_PhoneNumber').trigger('blur.mask')` — Deivide, Apr 02 '19 at 14:32

score 21 · Answer 1 · answered Apr 26 '15 at 00:09

21

Perhaps things have changed since this question was asked, because Jason P's first suggestion appears to work now.

$('#txt_PhoneNumber').trigger('input');

jsfiddle

The following should work too:

$('#txt_PhoneNumber').trigger('paste');

answered Apr 26 '15 at 00:09

John S

21,212
8
46
56

1

$('#txt_PhoneNumber').trigger('input'); works for me. – Jackson Cassimiro Feb 12 '17 at 00:40
If the phone number value is blank, .trigger('input') leaves it as "(___) ___-____" instead of blank. Reapplying the mask with .mask('(999) 999-9999') does the trick. – Garland Pope Feb 11 '19 at 03:32

score 2 · Answer 2 · answered May 28 '14 at 20:39

2

I was able to get it to refresh by calling .trigger("focus") : JSFiddle

The downside: it highlights the input.

answered May 28 '14 at 20:39

solskido

21
2

Really strange behaviour, i changed your code ( not using Math.random, just simple text ) , and it stoped working `$("#txt_PhoneNumber").val(function(index,val){ return 10 * 10; }).trigger("focus");` – Tim TJey Jun Jun 24 '16 at 00:27
I need to support IE 11 and Chrome v64.0. In IE 11 .trigger('input') is all that is needed. In Chrome 64.0 I find I need .trigger('input').trigger('focus'). – Tom Regan Mar 01 '18 at 15:10

score 0 · Answer 3 · answered Mar 30 '21 at 11:05

0

After set the value, call the jQuery trigger fn.

$('#txt_PhoneNumber').trigger('keyup');

Works for me.

jquery.mask.js @version: v1.14.16

answered Mar 30 '21 at 11:05

cau

572
3
9

score -1 · Answer 4 · answered Nov 14 '15 at 05:27

Programmatically change masking

            if (is_loose == "True") {                   
                $("#it_qty").removeAttr("data-inputmask","'mask': '9{0,20}'");
                $("#it_qty").attr("data-inputmask", "'mask': '9{0,20}.9{0,2}'");

                $("[data-mask]").inputmask();// if necessary

            } else {
                $("#chk_is_loose").prop("checked", false);
                $("#it_qty").removeAttr("data-inputmask", "'mask': '9{0,20}.9{0,2}'");
                $("#it_qty").attr("data-inputmask", "'mask': '9{0,20}'");
                $("[data-mask]").inputmask();// if necessary
            }

jquery.maskedinput programmatically set value and apply mask?

4 Answers4