Simplest Number Input Mask Plugin with jQuery – Simple Mask

Form
Simplest-Number-Input-Mask-Plugin-with-jQuery-Simple-Mask
File Size: 2.9 KB
Views Total: 2078 views
Last Update:August 23, 2022
Publish Date: November 18, 2014
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

The simple input mask is a little jQuery plugin. It creates masks on input fields that set a limit for the user to type numbers in a definite format. The other unique factor is that it automatically jumps to another field while typing the number. Generally, it separates the number with a hyphen symbol spontaneously, if you type any number inside the input box or field. This feature helps to enhance the visualization factor of this phenomenon.

Table of Contents

How to use it:

1. Include the jQuery simple mask plugin after loading jQuery library.

<script src="jquery-1.11.1.min.js"></script>
<script src="src/jquery.SimpleMask.js"></script>

2. Call the plugin on the input fields and custom the mask rules like this:

$('input').simpleMask({ 
  'mask': ['####-####','#####-####'] 
});

3. More Options.

// auto jump to next input fields 
// e.g. $('#input-2')
nextInput: null,

// onComplete event
onComplete : null
Done
Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v1.0.10
  • v1.0.9

Kayla Matthews

Howdy! I'm a web designer and developer. I built CSS-Tricks, a website all about building websites, going strong for 5 years.

Related jQuery Plugins

You Might Also Like