Range 0-100 using jQuery inputmask plugin

狂风中的少年 提交于 2019-12-12 11:10:08

问题


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

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

回答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.




回答2:


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




回答3:


Based on the inputmask plugin hompage:

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


来源:https://stackoverflow.com/questions/26649788/range-0-100-using-jquery-inputmask-plugin

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!