CODEWITHSUNDEEP
javascriptjqueryhtmlinput-maskjquery-inputmask
NieAR
NieAR

Reputation: 1445

Range 0-100 using jQuery inputmask plugin

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

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

Upvotes: 8

Views: 53212

Answers (4)

D4V1D
D4V1D

Reputation: 5849

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

enter image description here

Upvotes: 0

Jean-Paul
Jean-Paul

Reputation: 21180

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.

Upvotes: 30

TheGr8_Nik
TheGr8_Nik

Reputation: 3200

Based on the inputmask plugin hompage:

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

Upvotes: -3

brandelizer
brandelizer

Reputation: 352

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

Upvotes: -1

Related Questions