Range 0-100 using jQuery inputmask plugin

Question

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

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

Daily

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.

Hyson

Is there any way to implement the range in 'integer' alias instead of regex? Like .inputmask('integer',{minValue:1, maxValue:100}? (Just curious.) – Kleeman

Yes, this has been implemented recently. Back when the question was asked, this feature didn't exist yet but they have implemented it now. – Hyson

The jFiddle is not working when I try it. It throws a JS error TypeError: Inputmask is not a constructor – Lax

@Lax Apparently the newer versions of inputmask are not backward compatible with my code. I changed the js dependencies in the jsFiddles to use the old inputmask plugin (version 3.1.57). Doing that, everything works as expected again. To use the code with the newest inputmask library, you probably only need to change sth small in the syntax. Good luck :) – Hyson

The one with regex are more better cause others allow to tape negative or over 100 and correct them later on lost focus and not on taping like the regex one do. – Accumulative

Answer 2

Hum, I was seeking a solution to match all values for my field that are between 0.00 and 100.00 with jQuery.inputmask.

I saw the accepted answer that requires the user to add an external lib for the plugin and I managed to come up with a solution that is built-in.

So here it goes.

<input type="text" data-inputmask data-inputmask-mask="(99)|(100)" name="field"/>

or, with jQuery

jQuery(function($) {
    $('input').inputmask("(99)|(100)");
});

rendering as per the following

Adamantine

Answer 3

You can make this with simple html!! http://www.w3schools.com/tags/att_input_min.asp http://www.w3schools.com/tags/att_input_max.asp

Radiotelegraphy

or with jquery validate plugin – Radiotelegraphy

Answer 4

Based on the inputmask plugin hompage:

$(selector).inputmask("99-9999999");

Chirm

The dash is literal, not a range indicator. – Munafo