jQuery Plugin To Restrict Input To Numeric Values - Mask As Number

File Size: 24.2 KB
Views Total: 11304
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Restrict Input To Numeric Values - Mask As Number

Mask As Number is a lightweight and sometimes useful jQuery plugin which restricts the input fields to a specific number of numeric values and prevents invalid keystrokes. With support for max/min lengths or values. You can use this plugin to allow only numbers in your special inputs like currency and unit fields.

How to use it:

1. Place jQuery library and the jQuery Mask As Number plugin's JS file right before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-mask-as-number.js"></script>

2. Active the plugin on the input fields.

$('.maskedTextField').maskAsNumber();

3. Specify the max length using the native maxlength attribute:

<input class="maskedTextField" maxlength="8">

4. Specify the max / min values using the native data-mask-as-number-* attributes like this:

<input class="maskedTextField"
       data-mask-as-number-min="2">

<input class="maskedTextField"
       data-mask-as-number-max="512">

5. You can also set the max / min values in the JavaScript during init.

$('.maskedTextField').maskAsNumber({
  min: 2, 
  max: 3
});

Changelog:

2017-03-11

  • Now the maskAsNumber method returns itself for cascading. Startup on chrome fixed when the default value is invalid

2017-02-03

  • Now the method to extract the real value from number input field doesn't close the android keyboard (when changing input type)

2017-01-30

  • Fixed cases when missing "data" on element
  • Now supports decimals!

2017-01-24

  • Fixed min/max defined as options

v1.1 (2016-12-10)

  • Added paste event support, removed useless stored data, improved max value handling

This awesome jQuery plugin is developed by andrehtissot. For more Advanced Usages, please check the demo page or visit the official website.