Imask

 <!-- Form -->
                            <form class="form">
                            <div class="mb-3">
                            <label class="form-label">
                            RegExp (Russian postal code)
                            <span class="desc">/^[1-6]\d{0,5}$/</span>
                            </label>
                            <input class="form-control" id="regexp-mask" type="text"
                              value=""
                              />
                            </div>

                            <div class="mb-3">
                            <label class="form-label">
                            Pattern (Phone)
                            <span class="desc">+{7}(000)000-00-00</span>
                            </label>
                            <input class="form-control" id="phone-mask" type="text"
                              value=""
                              />
                            <div class="unmasked-value desc">
                            unmasked:
                            <span id="phone-unmasked"></span>
                            <span id="phone-complete" class="example__complete"></span>
                            </div>
                            </div>

                            <div class="mb-3">
                            <label class="form-label">
                            Pattern (Secure)
                            <span class="desc">XXX-XX-0000</span>
                            </label>
                            <input class="form-control" id="ssn-mask" type="text"
                              value=""
                              />
                            <div class="unmasked-value desc">
                            value:
                            <span id="ssn-value"></span>
                            <span id="ssn-complete" class="example__complete"></span>
                            </div>
                            </div>

                            <div class="mb-3">
                            <label class="form-label">
                            Number
                            <span class="desc">in range [-10000, 10000]</span>
                            </label>
                            <input class="form-control" id="number-mask" type="text"
                              value=""
                              />
                            <div class="unmasked-value desc">
                            number:
                            <span id="number-value"></span>
                            </div>
                            </div>

                            <div class="mb-3">
                            <label class="form-label">
                            Date
                            <span class="desc">'dd.mm.yyyy' in range [01.01.1990,
                            01.01.2020]</span>
                            </label>
                            <input class="form-control" id="date-mask" type="text"
                              value=""
                              />
                            <div class="unmasked-value desc">
                            date:
                            <span id="date-value"></span>
                            </div>
                            </div>

                            <div class="mb-3">
                            <label class="form-label">
                            On-the-fly select
                            <span class="desc">phone or email</span>
                            </label>
                            <input class="form-control" id="dynamic-mask" type="text"
                              />
                            <div class="unmasked-value desc">
                            unmasked:
                            <span id="dynamic-value"></span>
                            <span id="dynamic-complete" class="example__complete"></span>
                            </div>
                            </div>

                            <div class="mb-3">
                            <label class="form-label">
                            Mask in mask
                            <span class="desc">currency input</span>
                            </label>
                            <input class="form-control" id="currency-mask" type="text"
                              />
                            <div class="unmasked-value desc">
                            unmasked:
                            <span id="currency-value"></span>
                            <span id="currency-complete" class="example__complete"></span>
                            </div>
                            </div>

                            <div class="mb-3">
                            <label class="form-label">
                            Pipe
                            <span class="desc">unmasked → masked</span>
                            </label>
                            <input class="form-control" id="pipe-mask" type="text"
                              />
                            <div class="unmasked-value desc">
                            masked:
                            <span id="pipe-value"></span>
                            <span id="pipe-complete" class="example__complete"></span>
                            </div>
                            </div>
                            <!-- Card number -->
                            <div class="mb-3">
                            <label class="form-label" for="card-mask">Card Number</label>
                            <input class="form-control" id="card-mask" type="text"
                              value=""
                              />
                            </div>
                            <!-- CVV -->
                            <div class="mb-3">
                            <div class="mb-3">
                            <label class="form-label" for="digit-mask">
                            CVV Code
                            <i class="fe fe-help-circle ms-1" data-bs-toggle="tooltip" data-placement="top"
                              title="A 3 - digit number, typically printed on the back of
                                a card."></i>
                            </label>
                            <input class="form-control" id="digit-mask" type="text"
                              value=""
                              />
                            </div>
                            </div>
                            </form>