Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
jquery.inputmask is a jQuery plugin which create an input mask. An input mask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, etc.
For more info please visit the plugin's Demo Page or Github Repo.

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, 99 or ... 9999999999
Right aligned numeric mask
Currency format € ___.__1.234,56

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9