Logo

Documentation v1.0.6

  • Forms
  • Inputmask
Preview Upgrade to Pro

Overview

Inputmask is a javascript library that creates an input mask. Inputmask can run against vanilla javascript, jQuery, and jqlite. For full documentation please check the plugin's documentation.

Usage

Inputmask's Javascript files are bundled in the global plugin bundles and globally included in all pages: 
<script src="assets/plugins/global/plugins.bundle.js"></script>

Initialization

  • Inputmask instances can be initialized via new Inputmask() class as explained in the Documentation.
  • Inputmask instances can be initialized via data-inputmask HTML attribute as explained in the Documentation.

Examples

Some examples of using Inputmaks with variouse options:
Custom date format: mm/dd/yyyy
Phone number format: (999) 999-9999
Phone number format with placeholder: (999) 999-9999
Mask 9 , 99 or ... 9999999999
Numeric format
Currency format: € ___.__1.234,56
Custom format: 999.999.999.999
Custom format: _@_ 
// Date
Inputmask({
    "mask" : "99/99/9999"
}).mask("#kt_inputmask_1");

// Phone 
Inputmask({
    "mask" : "(999) 999-9999"
}).mask("#kt_inputmask_2");

// Placeholder 
Inputmask({
    "mask" : "(999) 999-9999",
    "placeholder": "(999) 999-9999",
}).mask("#kt_inputmask_3");

// Repeating 
Inputmask({
    "mask": "9",
    "repeat": 10,
    "greedy": false
}).mask("#kt_inputmask_4");

// Right aligned 
Inputmask("decimal", {
    "rightAlignNumerics": false
}).mask("#kt_inputmask_5");

// Currency
Inputmask("€ 999.999.999,99", {
    "numericInput": true
}).mask("#kt_inputmask_6");

// Ip address
Inputmask({
    "mask": "999.999.999.999"
}).mask("#kt_inputmask_7");

// Email address
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"
        }
    }
}).mask("#kt_inputmask_8");
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Download Jet HTML Free
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now