Logo

Input Mask Examples


       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          Input Mask Examples
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Date</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <input type='text' class="form-control" id="kt_inputmask_1" type="text"/>
            <span class="form-text text-muted">Custom date format: <code>mm/dd/yyyy</code></span>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Custom Placeholder</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <input type='text' class="form-control" id="kt_inputmask_2" type="text"/>
            <span class="form-text text-muted">Date mask with custom placeholder: <code>mm/dd/yyyy</code></span>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Phone Number</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <input type='text' class="form-control" id="kt_inputmask_3" type="text"/>
            <span class="form-text text-muted">Phone number mask: <code>(999) 999-9999</code></span>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Empty Placeholder</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <input type='text' class="form-control" id="kt_inputmask_4" type="text"/>
            <span class="form-text text-muted">Phone number mask: <code>99-9999999</code></span>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Repeating Mask</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <input type='text' class="form-control" id="kt_inputmask_5" type="text"/>
            <span class="form-text text-muted">Mask <code>9</code>, <code>99</code> or ... <code>9999999999</code></span>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Right Align</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <input type='text' class="form-control" id="kt_inputmask_6" type="text"/>
            <span class="form-text text-muted">Right aligned numeric mask</span>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Currency</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <input type='text' class="form-control" id="kt_inputmask_7" type="text"/>
            <span class="form-text text-muted">Currency format <code>€ ___.__1.234,56</code></span>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">IP Address</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <input type='text' class="form-control" id="kt_inputmask_8" type="text"/>
           </div>
          </div>
          <div class="row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Email Address</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <input type='text' class="form-control" id="kt_inputmask_9" type="text"/>
           </div>
          </div>
         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-9 ml-lg-auto">
            <button type="reset" class="btn btn-primary mr-2">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
          </div>
         </div>
        </form>
        <!--end::Form-->
       </div>
      

      // Class definition

      var KTInputmask = function () {

       // Private functions
       var demos = function () {
        // date format
        $("#kt_inputmask_1").inputmask("99/99/9999", {
         "placeholder": "mm/dd/yyyy",
         autoUnmask: true
        });

        // custom placeholder
        $("#kt_inputmask_2").inputmask("99/99/9999", {
         "placeholder": "mm/dd/yyyy",
        });

        // phone number format
        $("#kt_inputmask_3").inputmask("mask", {
         "mask": "(999) 999-9999"
        });

        // empty placeholder
        $("#kt_inputmask_4").inputmask({
         "mask": "99-9999999",
         placeholder: "" // remove underscores from the input mask
        });

        // repeating mask
        $("#kt_inputmask_5").inputmask({
         "mask": "9",
         "repeat": 10,
         "greedy": false
        }); // ~ mask "9" or mask "99" or ... mask "9999999999"

        // decimal format
        $("#kt_inputmask_6").inputmask('decimal', {
         rightAlignNumerics: false
        });

        // currency format
        $("#kt_inputmask_7").inputmask('€ 999.999.999,99', {
         numericInput: true
        }); //123456  =>  € ___.__1.234,56

        //ip address
        $("#kt_inputmask_8").inputmask({
         "mask": "999.999.999.999"
        });

        //email address
        $("#kt_inputmask_9").inputmask({
         mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
         greedy: false,
         onBeforePaste: function (pastedValue, opts) {
          pastedValue = pastedValue.toLowerCase();
          return pastedValue.replace("mailto:", "");
         },
         definitions: {
          '*': {
           validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
           cardinality: 1,
           casing: "lower"
          }
         }
        });
       }

       return {
        // public functions
        init: function() {
         demos();
        }
       };
      }();

      jQuery(document).ready(function() {
       KTInputmask.init();
      });
      
Custom date format: mm/dd/yyyy
Date mask with custom placeholder: mm/dd/yyyy
Phone number mask: (999) 999-9999
Phone number mask: 99-9999999
Mask 9, 99or ... 9999999999
Right aligned numeric mask
Currency format € ___.__1.234,56

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo