by Firecheckout Support

How to create field masks for Magento 2 checkout fields?

This article helps you to set the right mask for the fields: telephone, fax.

Note:Firecheckout uses Text Mask library to create field masks. Please read TextMask Docs for more information.

Let's start. Please do the steps:

  • Create a custom.js file.
  • Using a demo of Text Mask, choose the phone mask.
  • According to this example, set the masks.
    ], function ($, _, mask, placeholder) {
        'use strict';

        var scopes = [
            '.form-shipping-address',  //define address form in which need to set the phone-mask

        _.each(scopes, function (scope) {
                guide: false,
                mask: function (raw) {
                    var mask =['(',/\d/, /\d/,')',/\d/,/\d/,/\d/,/\d/,/\d/,'-',/\d/,/\d/,/\d/,/\d/];

                    if (raw.length == 13) {
                        mask = ['(',/\d/, /\d/,')',/\d/,/\d/,/\d/,/\d/,'-',/\d/,/\d/,/\d/,/\d/];

                    return mask;


                guide: false,
                mask: function (raw) {
                    var mask =[/\d/, /\d/,'-',/\d/,/\d/,/\d/,'-',/\d/,/\d/,/\d/,/\d/];
                    return mask;
        // you can show the mask of a field in the placeholder
  • See the result.
  • magento 2 checkout field mask

  • Save the file and run the following bash commands to deploy the script:
cd magento/root/folder
  rm -rf var/view_preprocessed pub/static/frontend
  bin/magento setup:static-content:deploy

Recent articles