Range 0-100 using jQuery inputmask plugin

Question

How can I create mask for range from 0 to 100?

$(document).ready(function() {
    $("#masked").inputmask(???);
});

Answer 1

You can use the jquery.inputmask.regex.extensions.js for that. You can find the raw js with all extensions on this link. The github part about the regex extension (and all the other extensions) can be found on jquery.inputmask#regex-extensions.

When you have that extension included, you can simply use the following regex:

^[1-9][0-9]?$|^100$

This matches 1 or 2 digits and the number 100.

Then you simply pass it to the inputmask plugin as normal:

HTML

Test: <input type="text" id="example1">

JavaScript

$(document).ready(function(){
    $("#example1").inputmask('Regex', { regex: "^[1-9][0-9]?$|^100$" });
});

Here is a jsFiddle to prove that it works:

> SEE DEMO

---

Edit 1

I just saw that you wanted to match 0-100 opposed to the 1-100 I did above.

For matching 0-100, simply change "^[1-9][0-9]?$|^100$" to "^[0-9][0-9]?$|^100$"

Where I changed the 1 in "^[1-9][0-9]?$|^100$" to a 0. The corrected jsFiddle can be found here.

---

Edit 2

As of January 14, 2015, it is now also possible by using the numeric extension. With that extension, you can now simply do the following for an integer range:

$("#example1").inputmask('integer',{min:1, max:100});

And for decimal numbers:

$("#example1").inputmask('decimal',{min:1, max:100});

See demo.

---

Edit 3

As of September 2016, the syntax has changed:

$("#example1").inputmask("numeric", {
  min: 0,
  max: 100
});

See NEW DEMO

Mind you that it now only works after the number has been entered and the user has clicked somewhere outside of the input box.