Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.

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 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