jQuery Number Maxlength Plugin Examples

Add the attribute [data-max-length="[$minus][$integral].[$fractional]"] to your input element to enable automatic configuration.

<input type="text" data-max-length="-5.2">

Omit [$minus] if negative numbers are not allowed in your input element.

<input type="text" data-max-length="5.2">

[$fractional] can be omitted as well if only integral numbers are allowed in your input element.

<input type="text" data-max-length="5">

Values of 0 for the integral limit, as well as any other unreadable parameters, will be reset to the default value of {integral: 9}.

<input type="text" data-max-length="0.2">

<input type="text" data-max-length="">

Add the attribute [data-disable-autofill] to disable fractional autofill.

<input type="text" data-max-length="5.2" data-disable-autofill>

Add the attribute [data-disable-auto-comma] to disable comma autofill.

<input type="text" data-max-length="5" data-disable-auto-comma>

Press the minus key to conveniently change the plus or minus sign of the number when [data-max-length] is enabled.
Add the attribute [data-disable-smart-minus] to disable this mechanism.

<input type="text" data-max-length="-5">

<input type="text" data-max-length="-5" data-disable-smart-minus>

All input elements with max length configuration will trigger all its enabled functions when document is ready.
Add the attribute [data-disable-init-refresh] to disable this initial fresh process.

<input type="text" data-max-length="5.2" value="12345">

<input type="text" data-max-length="5.2" value="12345" data-disable-init-refresh>

Add the attribute [data-highlight-minus="[$hex]"] to enable highlighting of negative values.
Uses default red(#FF0000) color if the hexadecimal color is not assigned.

<input type="text" data-max-length="-5" value="-12345" data-highlight-minus>

<input type="text" data-max-length="-5" value="-12345" data-highlight-minus="#0099FF">

All input elements with max length configuration will be aligned right side when not focused.
Add the attribute [data-horizontal-align="[$align]"] to customize text align position.

<input type="text" data-max-length="5" data-horizontal-align="left">

<input type="text" data-max-length="5" data-horizontal-align="center">

Add the attribute [data-sum="[$selector]"] / [data-product="[$selector]"] to enable quick sum or product calculation on DOM elements matched by the jQuery selector.

<input type="text" class="sumTarget" data-max-length="-5.2">
<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">

<input type="text" class="productTarget" data-max-length="-3.1">
<input type="text" class="productTarget" data-max-length="-3.1">
<input type="text" class="productTarget" data-max-length="-3.1">
<input type="text" data-product="input.productTarget" data-max-length="-9.3">

Add the attribute [data-difference="[$minuendSelector],[$subtrahendSelector]"] / [data-quotient="[$dividendSelector],[$divisorSelector]"] to enable quick difference or quotient calculation on DOM elements matched by the jQuery selector.

<input type="text" id="minuend" data-max-length="-5.2">
<input type="text" class="subtrahend" data-max-length="-5.2">
<input type="text" data-difference="#minuend,.subtrahend" data-max-length="-6.2">	

There can be multiple subtrahends/divisors, but only 1 minuend/dividend.

<input type="text" id="dividend" data-max-length="-5">
<input type="text" class="divisor" data-max-length="-2">
<input type="text" class="divisor" data-max-length="-2">
<input type="text" data-quotient="#dividend,.divisor" data-max-length="-5.2">

Add the attribute [data-ceil] / [data-floor] to change rounding method in auto calculation functions.

<input type="text" class="ceilSumTarget" data-max-length="-5.2">
<input type="text" data-sum="input.ceilSumTarget" data-ceil data-max-length="-5">

<input type="text" class="floorSumTarget" data-max-length="-5.2">
<input type="text" data-sum="input.floorSumTarget" data-floor data-max-length="-5">

$.NumberUtil is an extended jQuery decimal calculating utility for use.

Automatically read your attribute [lang] of your [html] tag to select the proper number format.
If fail, then read the language of user's browser. For code consistency, please remain using ['.'] as decimal point in attribute [data-max-length].

<html lang="en">
	~
	<input type="text" data-max-length="-5.2" value="-12,345.00">
	~
</html>

<html lang="es">
	~
	<input type="text" data-max-length="-5.2" value="-12.345,00">
	~
</html>

<html lang="fi">
	~
	<input type="text" data-max-length="-5.2" value="-12 345.00">
	~
</html>

If that doesn't match the correct format, you can invoke $.NumberUtil.setNumberFormatStandard() in your ready event to select format from ["ISO", "EN", "ES"].

$(document).ready(() => {
	$.NumberUtil.setNumberFormatStandard('EN');
});