jQuery Masked Input | Can't remove mask after correct entry to the phone number field

Question

Well, I am trying to mask cellphone number field of my magento store. The mask I want to use is "(599) 999 9999".

If user enter phone number correctly, I want to remove the mask and trim those whitespaces and parantheses like "(532) 123 45 67" -> "5321234567". If the entry of number isn't complete, mask function automatically clears all input field so it's ok for me but if the entry is correct I want it to display the field without the mask.

I am stuck at this step and can't complete my custom shipping module's requirements. Any help would be great.

Here is the JSFiddle link: http://jsfiddle.net/KKhKV/4/

HTML:

<input type="text" name="billing[telephone]" value="" title="<?php echo $this->__('Telephone') ?>" class="input-text" id="billing:telephone" />

<input type="text" id="sec" />

JavaScript:

var mask = "(599) 999 9999";
//jQuery("#billing\\:telephone").mask(mask);

jQuery("#billing\\:telephone").focus(function () {
    jQuery("#billing\\:telephone").val("");
    jQuery("#billing\\:telephone").mask(mask);
    jQuery("#billing\\:telephone").val("(5");
})
    .blur(function () {

        jQuery("#billing\\:telephone").unmask(mask);
        var a = jQuery("#billing\\:telephone").val();

        var reg = new RegExp(" ","g");
        a = a.replace(reg,"");
        a = a.replace("(","");
        a = a.replace(")","");
        //jQuery("#billing\\:telephone").val(a); THIS DOES NOT WORK
        jQuery("#sec").val(a); // THIS WORKS NICE
});

Answer 1

Setting a timeout inside the blur seems to work:

.blur(function () {
    setTimeout(function () {
        jQuery("#billing\\:telephone").val(a);
    }, 1);
});

Demo

I would rather trap the change event to update the value.