How to use inputmask - 9 common examples

'2': {
        'validator': '[2-9]'
      }
    });

    if (!this.element) {
      return;
    }

    var mask = this.get('mask'), options = this.get('options');

    if (this.element.inputmask) {
      this.element.inputmask.remove();
    }

    var inputmask = new Inputmask(mask, options);
    inputmask.mask(this.element);

    // Initialize the unmasked value if it exists
    if (isPresent(this.get('unmaskedValue'))) {
      this.element.value = this.get('unmaskedValue');
    }

    // If the mask has changed, we need to refocus the input to show the
    // proper mask preview. Since the caret is not positioned by the focus
    // even, but the click event, we need to trigger a click as well.
    if (this.element === document.activeElement) {
      this.element.blur();
      this.element.focus();
      this.element.click();
    }
  },

// mask
        if (mask.length < 1) {
            return;
        }

        if (mask.removeMaskOnSubmit) {
            let form = element.form || this.element.closest('form')

            form.addEventListener('orchid:screen-submit', () => {
                element.inputmask.remove();
            });
            mask.removeMaskOnSubmit = undefined;
        }

        Inputmask(mask).mask(element);
    }
}

_setupMask() {
    let mask = get(this, 'mask'), options = get(this, '_options');
    let inputmask = new Inputmask(mask, options);
    inputmask.mask(this.element);

    // We need to setup a manual event listener for the change event instead of using the Ember
    // Component event methods, because the Inputmask events don't play nice with the Component
    // ones. Similar issue happens in React.js as well
    // https://github.com/RobinHerbots/Inputmask/issues/1377
    let eventListener = event => this._processNewValue(event.target.value);
    set(this, '_changeEventListener', eventListener);
    this.element.addEventListener('input', eventListener);
  },

_processNewValue(value) {
    let cursorStart = this.element.selectionStart;
    let cursorEnd = this.element.selectionEnd;
    let unmaskedValue = this._getUnmaskedValue();
    let oldUnmaskedValue = get(this, '_value');
    let options = get(this, '_options');

    // We only want to make changes if something is different so we don't cause infinite loops or
    // double renders.
    // We want to make sure that that values we compare are going to come out the same through
    // the masking algorithm, to ensure that we only call `update` if the values are actually different
    // (e.g. '1234.' will be masked as '1234' and so when `update` is called and passed back
    // into the component the decimal will be removed, we don't want this)
    if (Inputmask.format(String(oldUnmaskedValue), options) !== Inputmask.format(unmaskedValue, options)) {
      this.sendUpdate(unmaskedValue, value);

      // When the value is updated, and then sent back down the cursor moves to the end of the field.
      // We therefore need to put it back to where the user was typing so they don't get janked around
      schedule('afterRender', () => {
        this._syncValue();
        this.element.setSelectionRange(cursorStart, cursorEnd);
      });
    }
  },

componentUpdated: function(el, binding){
                var inputEl = Settings.getTargetElement(el);
                var maskOptions = Settings.getInputMaskOptions(binding);

                if ( binding.value !== binding.oldValue ) {
                    if ( inputEl.inputmask ) {
                        inputEl.inputmask.remove();
                    }

                    Inputmask(maskOptions).mask(inputEl);
                }
            }
        });

private setMask(mask): void {
		Inputmask(mask).mask(this.ref.nativeElement);
	}
}

surveyElement.inputMask == "decimal"
      ) {
        options.groupSeparator = rootWidget.numericGroupSeparator;
        options.autoGroup = rootWidget.numericAutoGroup;
      }
      if (surveyElement.inputMask == "currency") {
        options.digits = rootWidget.numericDigits;
        options.digitsOptional = rootWidget.numericDigitsOptional;
        options.prefix = surveyElement.prefix || "";
        options.placeholder = rootWidget.numericPlaceholder;
      }
      if (surveyElement.inputMask == "datetime") {
        mask = surveyElement.inputFormat;
      }

      Inputmask(mask, options).mask(el);

      el.onblur = function() {
        if (surveyElement.value === el.inputmask.getemptymask()) {
          surveyElement.value = "";
        }
      };

      el.oninput = function() {
        surveyElement.customWidgetData.isNeedRender = true;
      };

      var pushValueHandler = function () {
        if (el.inputmask.isComplete()) {
          surveyElement.value = options.autoUnmask ?
            el.inputmask.unmaskedvalue() : el.value;
        } else {

setMask: function() {
    Inputmask.extendDefinitions({
      '2': {
        'validator': '[2-9]'
      }
    });

    if (!this.element) {
      return;
    }

    var mask = this.get('mask'), options = this.get('options');

    if (this.element.inputmask) {
      this.element.inputmask.remove();
    }

    var inputmask = new Inputmask(mask, options);

tooltips: {
        callbacks: {
          label(tooltipItem, data) {
            const dataset = data.datasets[tooltipItem.datasetIndex];
            const label = data.labels[tooltipItem.index];
            const currentValue = dataset.data[tooltipItem.index];
            const percentage = parseFloat((currentValue * 100).toFixed(0));

            return `${label}: ${percentage}%`;
          },
        },
      },
    },
  });

export const inputmask = new Inputmask({
  alias: 'currency',
  allowMinus: false,
  autoUnmask: true,
  prefix: '',
});

export const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
});