Inputmask

Inputmask is a javascript library that creates an input mask. Inputmask can run against vanilla javascript, jQuery, and jqlite.

Inputmask documentation

Usage

CSS

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../assets/css/theme.min.css">

Js

Copy-paste the following <script> and Function near the end of your pages.

<script src="../node_modules/inputmask/dist/jquery.inputmask.min.js"></script>
<script src="../assets/js/main.js"></script>

Basic examples

<form>
                                                            <div class="mb-3 w-lg-50">
                                                               <label class="form-label" for="forDate">Date</label>
                                                               <input class="form-control"  data-inputmask-alias="datetime" placeholder="" type="text" data-inputmask-inputformat="dd/mm/yyyy" inputmode="numeric" id="date">
                                                            </div>
                                                            <div class="mb-3 w-lg-50">
                                                               <label class="form-label" for="currency">Currency</label>
                                                               <input class="form-control text-start" data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'" inputmode="numeric" id="currency"  >
                                                            </div>
                                                            <div class="mb-3 w-lg-50">
                                                               <label class="form-label" for="licensePlate">License plate</label>
                                                               <input class="form-control text-start" data-inputmask="'mask': '[9-]AAA-999'" inputmode="text" id="licensePlate"  >
                                                            </div>
                                                            <div class="mb-3 w-lg-50">
                                                               <label class="form-label" for="decimal">License plate</label>
                                                               <input class="form-control text-start" data-inputmask="'alias': 'decimal', 'groupSeparator': ','" inputmode="numeric"  id="decimal">
                                                            </div>
                                                            <div class="mb-3 w-lg-50">
                                                               <label class="form-label" for="ipAddress">IP Address</label>
                                                               <input class="form-control text-start" data-inputmask="'alias': 'ip'" inputmode="numeric"  id="ipAddress">
                                                            </div>
                                                            <div class="mb-3 w-lg-50">
                                                               <label class="form-label" for="email">Email Address</label>
                                                               <input class="form-control text-start" data-inputmask="'alias': 'email'" inputmode="numeric"  id="email">
                                                            </div>
                                                            <div class="mb-3 w-lg-50">
                                                               <label class="form-label" for="cc-mask">Card Number</label>
                                                               <input type="text" class="form-control" id="cc-mask"  data-inputmask="'mask': '9999 9999 9999'" inputmode="numeric"
                                                                  placeholder="xxxx-xxxx-xxxx-xxxx" required>
                                                            </div>
                                                            <div class="mb-3 w-lg-50">
                                                               <label class="form-label" for="cvv" >CVV Code <i class="fe fe-help-circle ms-1"
                                                                  data-bs-toggle="tooltip" data-placement="top" title=""
                                                                  data-original-title="A 3 - digit number, typically printed on the back of a card."></i></label>
                                                               <input type="text" class="form-control" name="cvv" id="cvv"
                                                                  placeholder="xxx" data-inputmask="'mask': '999'" inputmode="numeric" required>
                                                            </div>
                                                         </form>
Contents