Limit The Number Of Digits In Input - jQuery maxlength.js

maxlength.js is a feature-rich jQuery plugin that limits the number of digits and auto-formats numeric values in input fields. Can be helpful in ensuring data integrity and minimizing input errors.

Features:

• Restrict the number of digits allowed in input fields.
• Format numbers with thousand separators and rounded fractional digits automatically.
• Apply custom colors to negative number inputs.
• And more.

How to use it:

1. Include the minified version of the maxlength.js plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.maxlength.min.js"></script>

2. To initialize the plugin, simply add the data-max-length to the input field.

<!-- Only positive numbers are allowed -->
<!-- Maximum number of digits: 10 -->
<!-- Maximum decimal places: 2 -->
<input data-max-length="+10.2" />

<!-- Positive and negative numbers are allowed -->
<!-- Maximum number of digits: 5 -->
<!-- Maximum decimal places: 1 -->
<input data-max-length="-5.1" />

3. More HTML5 data attributes to customize the plugin.

• data-disable-autofill: Disable fractional autofill.
• data-disable-auto-comma: Disable comma autofill.
• data-disable-smart-minus: Disable smart minus configuration.
• data-disable-init-refresh: Disable the initial refresh.
• data-enable-highlight-minus: Enable highlighting of negative values in either default red or the assigned hexadecimal color.
• data-horizontal-align: 'Left', 'Center', or 'Right'(Default).

<input 
  data-max-length="-6.2"
  data-disable-autofill
  data-disable-auto-comma
  data-disable-smart-minus
  data-disable-init-refresh
  data-horizontal-align="left"
  data-enable-highlight-minus="#00ff00"
  />

4. It also allows you to sum numbers of multiple input fields.

<input type="text" class="sumTarget" data-max-length="-5.2">
<input type="text" class="sumTarget" data-max-length="-5.2">
<input type="text" data-sum="input.sumTarget" data-max-length="-6.2">

Changelog:

2023-07-15

• Add support for jQuery's no Conflict mode. 

2023-06-03

• Change NumberUtil() to an extended object of jQuery: $.NumberUtil.

2023-05-21

• Remove unused exports of the internal util.

2023-05-10

• Bugfix

---

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