Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.

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

User Profile 12 messages

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo