Maskit

Demo form

            
              // 0 any number
              // A any char
              // Ы any cyrillic char
              // ?+-()[]{}.,\\/-=_~`|'" autofilled chars

              // also you can wrap any symbol in brackets "{someChar}",
              // and it will be autofilled, in other cases mask will be waiting for same char

              // Usage:
              //npm i --save 'maskit'

              import Maskit from 'maskit';

              let input = document.querySelector('input.masked');
              let mask = new Maskit(input, {
                mask: '',
                resetOnBlurIfInvalid: true, // Clear field on blur if mask is not fully filled
                onFilled: ({instance}) => {}, // Triggered when mask is completely filled
                offFilled: ({instance}) => {}, // Triggered when mask is no longer completely filled
                onBlur: ({instance}) => {}, // Triggered on input blur
                onChange: ({instance}) => {}, // Triggered on every value change
                onInit: ({instance}) => {}, // Triggered after mask initialization
                beforeChange: ({instance, value}) => {}, // Called before mask is applied (for dynamic changes)
              });
              // if you need to change mask of input
              // mask.setMask(newMask);