0

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
});
ilkb
  • 33
  • 1
  • 8

1 Answers1

0

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.

Salman A
  • 262,204
  • 82
  • 430
  • 521
  • Thanks a lot for your help! I changed it to change event and made some modifications. It's working great atm. http://jsfiddle.net/qhzr5/ – ilkb Jan 27 '14 at 09:15