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?

Answer 1

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

The downside: it highlights the input.

Answer 2

After set the value, call the jQuery trigger fn.

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

Works for me.

jquery.mask.js @version: v1.14.16

Answer 3

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');

Answer 4

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
            }