Phone Fields - masks

First of all need to install the mask library which let you to create any masks for the next fields: phone, date, currency, zip code, percentage, email, etc.

To install the library, follow this link Text Mask.

After installation it, do not forget to apply the script:

<script type="text/javascript" src="./node_modules/vanilla-text-mask/dist/vanillaTextMask.js"/>

Example, that makes phone masks for the billing address fields “telephone” and “fax”:

Create custom.js file. custom.js
Add the following code into this file

    document.observe('dom:loaded', function() {
        var addressTypes = ['billing'];
        addressTypes.each(function(addressType) {

            var phone = document.querySelector('[name="billing[telephone]"]');

            var maskedInputController = vanillaTextMask.maskInput({
                    inputElement: phone,
                    guide: false,
                    mask: function (raw) {
                        var phoneMask = ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];

                        if (raw.toString().length > phoneMask.length) {
                            phoneMask= ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
                        }

                        return phoneMask;
                    }
            });

            var fax = document.querySelector('[name="billing[fax]"]');

            var maskedInputController = vanillaTextMask.maskInput({
                    inputElement: fax,
                    guide: false,
                    mask: function (raw) {
                        var faxMask = ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];

                        if (raw.toString().length > faxMask.length) {
                            faxMask= ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
                        }

                        return faxMask;
                    }
            });

        });

    });

Phone Fields - masks

Next up