InputMask

Date

Date format: xx/xx/xxxx

Placeholder

format: (xxx) xxx-xxx

Phone

Phone format: (xxx) xxx-xxxx

Creditcard

Card format: xxxx xxxx xxxx xxxx

IP

IP format: xxx.xxx.xxx.xxx

SSN

SSN format: xxx-xx-xxxx

ISBN

ISBN format: xxx-xx-xxx-xxxx-x

Currency

Currency format: $xxx.xxx,xx

Purchase

Purchase format: XXXX xxxx-xxxx

Optional

Optional format: (xx) xxxxx-xxxx

numLetter

numLetter format: xxx-xxx

Decimal

Decimal format: xx.xx

Email

Email format: xxx@xxx.xxx

RTL

RTL format: xx/xxx/xxxx

Options

Reference Details
Inputmask Inputmask is a javascript library that creates an input mask. Inputmask can run against vanilla javascript, jQuery, and jqlite.
An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ...
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.

// Date InputMask 
$("#inputmaskDate").inputmask({
	alias: "datetime",
	inputFormat: "mm/dd/yyyy",
});

// Placeholder InputMask 
$("#inputmaskPlaceholder").inputmask({
	mask: "(999) 999-9999",
	placeholder: "(xxx) xxx-xxxx",
});

// Phone InputMask 
$("#inputmaskPhone").inputmask("(999) 999-9999");

// Card InputMask 
$("#inputmaskCard").inputmask("9999 9999 9999 9999");

// IP InputMask 
$("#inputmaskIP").inputmask("999.999.999.999");

// SSN InputMask 
$("#inputmaskSSN").inputmask("999-99-9999");

// ISBN InputMask 
$("#inputmaskISBN").inputmask("999-99-999-9999-9");

// Currency InputMask 
$("#inputmaskCurrency").inputmask("$999.999,99");

// Purchase InputMask 
$("#inputmaskPurchase").inputmask("AAAA 9999-****");

// Optional InputMask 
$("#inputmaskOptional").inputmask("(99) 9999[9]-9999");

// numLetter InputMask 
$("#inputmaskNumLetter").inputmask("999-AAA");

// Decimal InputMask 
$("#inputmaskDecimal").inputmask({
	alias: "decimal",
	radixPoint: ".",
});

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

// RTL InputMask 
$("#inputmaskRTL").inputmask("99/999/9999");