Documentation v8.1.5

Preview Downloads Purchase

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-inputmaskHTML attribute as explained in the Documentation.

Examples

Some examples of using Inputmaks with variouse options:

Date

Custom date format: mm/dd/yyyy

Phone number

Phone number format: (999) 999-9999

Plaeholder

Phone number format with placeholder: (999) 999-9999

Repeating mask

Mask 9, 99or ... 9999999999

Right aligned

Numeric format

Currency

Currency format: € ___.__1.234,56

IP Address

Custom format: 999.999.999.999

Email Address

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");
												

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.1.5

Overview

Usage

Initialization

Examples

Learn & Get Inspired

Support at devs.keenthemes.com

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.1.5

No result found

Overview

Usage

Initialization

Examples

Learn & Get Inspired

Support at devs.keenthemes.com