JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<form>
  <label for="Name">Name:</label>
  <input type="text" name="Name" id="Name" placeholder="Steve" />
  <br />
  <label for="Complex">Complex:</label>
  <input type="text" name="Complex" data-mask="complex-mask" id="Complex" inputmode="numeric" />
</form>

JavaScript

let page = (function(args) {
  let dom = {};

  let types = {
    'complex-mask': {
      format: '**.***.****',
      pattern: '__.___.____'
    }
  };

  let applyFormat = function(value, pattern, mask) {
    let strippedValue = value.replace(/[^a-zA-Z]/g, '');
    let chars = strippedValue.split(''),
      count = 0,
      formatted = '';

    for (let i = 0; i < pattern.length; i++) {
      const c = pattern[i];
      if (chars[count]) {
        if (/\*/.test(c)) {
          formatted += chars[count];
          count++;
        } else {
          formatted += c;
        }
      } else if (mask) {
        if (mask.split('')[i]) {
          formatted += mask.split('')[i];
        }
      }
    }

    return formatted;
  };

  let init = function(defaults) {
    if (defaults) {
      if (defaults.dom) {
        dom = defaults.dom;

        dom.querySelectorAll('[data-mask]').forEach(function(item) {
          let format = function(element) {
            let maskType = element.getAttribute('data-mask');
            if (maskType) {
              let mask = types[maskType]; // Load the type of mask to use
              const updatedValue = applyFormat(element.value, mask.format, null);
              if (updatedValue) {
              element.value = applyFormat(element.value, mask.format, mask.pattern);
              } else {
              	element.placeholder = applyFormat(element.value, mask.format, mask.pattern);
              }

              if (element.createTextRange) {
                let range = element.createTextRange();
                range.move('character', updatedValue.length);
                range.select();
              } else {
                element.focus();
                element.setSelectionRange(updatedValue.length, updatedValue.length);
              }
            }
          };

          item.addEventListener('keyup', function(e) {
            format(item); // on key release
          });
          format(item); // Initial set
        });
...