autoNumeric是一个用于国际货币格式和数字格式的有用JavaScript库。

它几乎支持欧洲、北美和南美、亚洲和印度使用的所有主要国际数字格式和货币符号。

您可能还喜欢：

• 带有jQuery的简易数字格式插件-数字
• 输入字段数据格式插件-掩码
• 价格格式jQuery插件-价格格式

如何使用它:

1.安装和导入。

# Yarn
$ yarn add autonumeric
 
# NPM
$ npm install autonumeric --save

import AutoNumeric from 'autonumeric';

2.或者在网页上包含最新的autoNumeric.js

<script src="/path/to/autoNumeric.js"></script>
<!-- from a cdn -->
<script src="//unpkg.com/autonumeric"></script>

3.在页面上创建一个普通输入字段。

<form>
  <input type="text" class="demo">
</form>

4.初始化autoNumeric库并指定货币符号。完成。

new AutoNumeric('.demo', { currencySymbol : '$' });

5.所有选项和默认值。您还可以通过HTML5数据属性传递以下选项。

/* Defines if the decimal places should be padded with zeroes
* `true`     : always pad decimals with zeros (ie. '12.3400')
* `false`    : never pad with zeros (ie. '12.34')
* `'floats'` : pad with zeroes only when there are decimals (ie. '12' and '12.3400')
* Note: setting allowDecimalPadding to 'false' will override the 'decimalPlaces' setting.
*/
allowDecimalPadding: {
  always: true,
  never : false,
  floats: 'floats',
},
 
/* Defines if the decimal character or decimal character alternative should be accepted when there is already a decimal character shown in the element.
* If set to `true`, any decimal character input will be accepted and will subsequently modify the decimal character position, as well as the `rawValue`.
* If set to `false`, the decimal character and its alternative key will be dropped as before. This is the default setting.
*/
alwaysAllowDecimalCharacter: {
  alwaysAllow: true,
  doNotAllow: false,
},
 
/* Defines where should be positioned the caret on focus
* null : Do not enforce any caret positioning on focus (this is needed when using `selectOnFocus`)
* `'start'` : put the caret of the far left side of the value (excluding the positive/negative sign and currency symbol, if any)
* `'end'` : put the caret of the far right side of the value (excluding the positive/negative sign and currency symbol, if any)
* `'decimalLeft'` : put the caret of the left of the decimal character if any
* `'decimalRight'` : put the caret of the right of the decimal character if any
*/
caretPositionOnFocus: {
  start                 : 'start',
  end                   : 'end',
  decimalLeft           : 'decimalLeft',
  decimalRight          : 'decimalRight',
  doNoForceCaretPosition: null,
},
 
/* Defines if a local list of AutoNumeric objects should be kept when initializing this object.
* This list is used by the `global.*` functions.
*/
createLocalList: {
  createList     : true,
  doNotCreateList: false,
},
 
/* Defines the currency symbol string.
* It can be a string of more than one character (allowing for instance to use a space on either side of it, example: '$ ' or ' $')
* cf. https://en.wikipedia.org/wiki/Currency_symbol
*/
currencySymbol: {
  none          : '',
  currencySign  : '¤',
  austral       : '₳', // ARA
  australCentavo: '¢',
  baht          : '฿', // THB
  cedi          : '₵', // GHS
  cent          : '¢',
  colon         : '₡', // CRC
  cruzeiro      : '₢', // BRB - Not used anymore since 1993
  dollar        : '$',
  dong          : '₫', // VND
  drachma       : '₯', // GRD (or 'Δρχ.' or 'Δρ.')
  dram          : '​֏', // AMD
  european      : '₠', // XEU (old currency before the Euro)
  euro          : '€', // EUR
  florin        : 'ƒ',
  franc         : '₣', // FRF
  guarani       : '₲', // PYG
  hryvnia       : '₴', // грн
  kip           : '₭', // LAK
  att           : 'ອັດ', // cents of the Kip
  lepton        : 'Λ.', // cents of the Drachma
  lira          : '₺', // TRY
  liraOld       : '₤',
  lari          : '₾', // GEL
  mark          : 'ℳ',
  mill          : '₥',
  naira         : '₦', // NGN
  peseta        : '₧',
  peso          : '₱', // PHP
  pfennig       : '₰', // cents of the Mark
  pound         : '£',
  real          : 'R$ ', // Brazilian real
  riel          : '៛', // KHR
  ruble         : '₽', // RUB
  rupee         : '₹', // INR
  rupeeOld      : '₨',
  shekel        : '₪',
  shekelAlt     : 'ש״ח‎‎',
  taka          : '৳', // BDT
  tenge         : '₸', // KZT
  togrog        : '₮', // MNT
  won           : '₩',
  yen           : 'Â¥',
},
 
/* Defines where the currency symbol should be placed (before of after the numbers)
* for prefix currencySymbolPlacement: "p" (default)
* for suffix currencySymbolPlacement: "s"
*/
currencySymbolPlacement: {
  prefix: 'p',
  suffix: 's',
},
 
/* Defines what decimal separator character is used
*/
decimalCharacter: {
  comma                    : ',',
  dot                      : '.',
  middleDot                : '·',
  arabicDecimalSeparator   : 'Ù«',
  decimalSeparatorKeySymbol: '⎖',
},
 
/* Allow to declare an alternative decimal separator which is automatically replaced by `decimalCharacter` when typed.
* This is used by countries that use a comma ',' as the decimal character and have keyboards with a numeric pads that have
* a period 'full stop' as the decimal character (France or Spain for instance).
*/
decimalCharacterAlternative: {
  none : null,
  comma: ',',
  dot  : '.',
},
 
/* Defines the default number of decimal places to show on the formatted value, and keep for the precision.
* Incidentally, since we need to be able to show that many decimal places, this also defines the raw value precision by default.
*/
decimalPlaces: {
  none : 0,
  one  : 1,
  two  : 2,
  three: 3,
  four : 4,
  five : 5,
  six  : 6,
},
 
/* Defines how many decimal places should be kept for the raw value (ie. This is the precision for float values).
*
* If this option is set to `null` (which is the default), then the value of `decimalPlaces` is used for `decimalPlacesRawValue` as well.
* Note: Setting this to a lower number of decimal places than the one to be shown will lead to confusion for the users.
*/
decimalPlacesRawValue: {
  useDefault: null,
  none      : 0,
  one       : 1,
  two       : 2,
  three     : 3,
  four      : 4,
  five      : 5,
  six       : 6,
},
 
/* Defines how many decimal places should be visible when the element is unfocused.
* If this is set to `null`, then this option is ignored, and the `decimalPlaces` option value will be used instead.
* This means this is optional ; if omitted the decimal places will be the same when the input has the focus.
*
* This option can be used in conjonction with the two other `scale*` options, which allows to display a different formatted value when the element is unfocused, while another formatted value is shown when focused.
* For those `scale*` options to have any effect, `divisorWhenUnfocused` must not be `null`.
*/
decimalPlacesShownOnBlur: {
  useDefault: null,
  none      : 0,
  one       : 1,
  two       : 2,
  three     : 3,
  four      : 4,
  five      : 5,
  six       : 6,
},
 
/* Defines how many decimal places should be visible when the element has the focus.
* If this is set to `null`, then this option is ignored, and the `decimalPlaces` option value will be used instead.
*
* Example:
* For instance if `decimalPlacesShownOnFocus` is set to `5` and the default number of decimal places is `2`, then on focus `1,000.12345` will be shown, while without focus `1,000.12` will be set back.
* Note 1: the results depends on the rounding method used.
* Note 2: the `getNumericString()` method returns the extended decimal places
*/
decimalPlacesShownOnFocus: {
  useDefault: null,
  none      : 0,
  one       : 1,
  two       : 2,
  three     : 3,
  four      : 4,
  five      : 5,
  six       : 6,
},
 
/* Helper option for ASP.NET postback
* This should be set as the value of the unformatted default value
* examples:
* no default value="" {defaultValueOverride: ""}
* value=1234.56 {defaultValueOverride: '1234.56'}
*/
defaultValueOverride: {
  doNotOverride: null,
},
 
/* Defines how many numbers should be grouped together (usually for the thousand separator)
* - "2",  results in 99,99,99,999 India's lakhs
* - "2s", results in 99,999,99,99,999 India's lakhs scaled
* - "3",  results in 999,999,999 (default)
* - "4",  results in 9999,9999,9999 used in some Asian countries
* Note: This option does not accept other grouping choice.
*/
digitalGroupSpacing: {
  two      : '2',
  twoScaled: '2s',
  three    : '3',
  four     : '4',
},
 
/* Defines the thousand grouping separator character
* Example : If `'.'` is set, then you'll get `'1.234.567'`
*/
digitGroupSeparator: {
  comma                   : ',',
  dot                     : '.',
  normalSpace             : ' ',
  thinSpace               : '\u2009',
  narrowNoBreakSpace      : '\u202f',
  noBreakSpace            : '\u00a0',
  noSeparator             : '',
  apostrophe              : `'`,
  arabicThousandsSeparator: 'Ù¬',
  dotAbove                : '˙',
  privateUseTwo           : '’', // \u0092
},
 
/* The `divisorWhenUnfocused` divide the element value on focus.
* On blur, the element value is multiplied back.
*
* Example : Display percentages using { divisorWhenUnfocused: 100 } (or directly in the Html with `<input data-divisor-when-unfocused="100">`)
* The divisor value does not need to be an integer, but please understand that Javascript has limited accuracy in math ; use with caution.
* Note: The `getNumericString` method returns the full value, including the 'hidden' decimals.
*/
divisorWhenUnfocused: {
  none      : null,
  percentage: 100,
  permille  : 1000,
  basisPoint: 10000,
},
 
/* Defines what should be displayed in the element if the raw value is an empty string ('').
* - 'focus'  : The currency sign is displayed when the input receives focus (default)
* - 'press'  : The currency sign is displayed whenever a key is being pressed
* - 'always' : The currency sign is always displayed
* - 'zero'   : A zero is displayed ('rounded' with or without a currency sign) if the input has no value on focus out
* - 'min'    : The minimum value is displayed if the input has no value on focus out
* - 'max'    : The maximum value is displayed if the input has no value on focus out
* - 'null'   : When the element is empty, the `rawValue` and the element value/text is set to `null`. This also allows to set the value to `null` using `anElement.set(null)`.
*/
emptyInputBehavior: {
  focus : 'focus',
  press : 'press',
  always: 'always',
  zero  : 'zero',
  min   : 'min',
  max   : 'max',
  null  : 'null',
},
 
/* Defines if the custom and native events triggered by AutoNumeric should bubble up or not.
*/
eventBubbles: {
  bubbles: true,
  doesNotBubble: false,
},
 
/* Defines if the custom and native events triggered by AutoNumeric should be cancelable.
*/
eventIsCancelable: {
  isCancelable: true,
  isNotCancelable: false,
},
 
/* This option is the 'strict mode' (aka 'debug' mode), which allows autoNumeric to strictly analyse the options passed, and fails if an unknown options is used in the settings object.
* You should set that to `true` if you want to make sure you are only using 'pure' autoNumeric settings objects in your code.
* If you see uncaught errors in the console and your code starts to fail, this means somehow those options gets polluted by another program (which usually happens when using frameworks).
*/
failOnUnknownOption: {
  fail  : true,
  ignore: false,
},
 
/* Determine if the default value will be formatted on initialization.
*/
formatOnPageLoad: {
  format     : true, // automatically formats the default value on initialization
  doNotFormat: false, // will not format the default value on initialization
},
 
/* Defines if the 'formula mode' can be activated by the user.
* If set to `true`, then the user can enter the formula mode by entering the '=' character.
* He will then be allowed to enter any simple math formula using numeric characters as well as the following operators +, -, *, /, ( and ).
* The formula mode is closed when the user either validate their math expression using the `Enter` key, or when the element is blurred.
* If the formula is invalid, the previous valid `rawValue` is set back, and the `autoNumeric:invalidFormula` event is sent.
* When a valid formula is accepted, then its result is `set()`, and the `autoNumeric:validFormula` event is sent.
*
* By default, this mode is disabled.
*/
formulaMode: {
  enabled : true,
  disabled: false,
},
 
/* Set the undo/redo history table size.
* Each record keeps the raw value as well and the last known caret/selection positions.
*/
historySize: {
  verySmall: 5,
  small    : 10,
  medium   : 20,
  large    : 50,
  veryLarge: 100,
  insane   : Number.MAX_SAFE_INTEGER,
},
 
/* Defines the name of the CSS class to use on contenteditable-enabled elements when the value is invalid
* This is not used when the HTML element used is an input.
*/
invalidClass: 'an-invalid',
 
/* Allow the user to 'cancel' and undo the changes he made to the given autonumeric-managed element, by pressing the 'Escape' key.
* Whenever the user 'validate' the input (either by hitting 'Enter', or blurring the element), the new value is saved for subsequent 'cancellation'.
*
* The process :
*   - save the input value on focus
*   - if the user change the input value, and hit `Escape`, then the initial value saved on focus is set back
*   - on the other hand if the user either have used `Enter` to validate (`Enter` throws a change event) his entries, or if the input value has been changed by another script in the mean time, then we save the new input value
*   - on a successful 'cancel', select the whole value (while respecting the `selectNumberOnly` option)
*   - bonus; if the value has not changed, hitting 'Esc' just select all the input value (while respecting the `selectNumberOnly` option)
*/
isCancellable: {
  cancellable   : true,
  notCancellable: false,
},
 
/* Controls the leading zero behavior
* - 'allow' : allows leading zeros to be entered. Zeros will be truncated when entering additional digits. On focusout zeros will be deleted
* - 'deny'  : allows only one leading zero on values that are between 1 and -1
* - 'keep'  : allows leading zeros to be entered. on focusout zeros will be retained
*/
leadingZero: {
  allow: 'allow',
  deny : 'deny',
  keep : 'keep',
},
 
/* Defines the maximum possible value a user can enter.
* Notes:
* - this value must be a string and use the period for the decimal point
* - this value needs to be larger than `minimumValue`
*/
maximumValue: {
  tenTrillions          : '10000000000000', // 10000 billions
  oneBillion            : '1000000000',
  zero                  : '0',
},
 
/* Defines the minimum possible value a user can enter.
* Notes:
* - this value must be a string and use the period for the decimal point
* - this value needs to be smaller than `maximumValue`
* - if this is superior to 0, then you'll effectively prevent your user to entirely delete the content of your element
*/
minimumValue: {
  tenTrillions          : '-10000000000000', // 10000 billions
  oneBillion            : '-1000000000',
  zero                  : '0',
},
 
/* Allows the user to increment or decrement the element value with the up and down arrow keys.
* The behavior is similar to the mouse wheel one.
* The up and down arrow keys behavior can be modified by the `upDownStep` option.
* This `upDownStep` option can be used in two ways, either by setting:
* - a 'fixed' step value (`upDownStep : 1000`), or
* - the 'progressive' string (`upDownStep : 'progressive'`), which will then activate a special mode where the step is automatically calculated based on the element value size.
*/
modifyValueOnUpDownArrow: {
  modifyValue: true,
  doNothing  : false,
},
 
/* Allows the user to increment or decrement the element value with the mouse wheel.
* The behavior is similar to the up/down arrow one.
* The wheel behavior can be modified by the `wheelStep` option.
* This `wheelStep` option can be used in two ways, either by setting:
* - a 'fixed' step value (`wheelStep : 1000`), or
* - the 'progressive' string (`wheelStep : 'progressive'`), which will then activate a special mode where the step is automatically calculated based on the element value size.
*
* Note :
* You can activate/deactivate the wheel event for each `wheelOn` option value by using the 'Shift' modifier key while using the mouse wheel.
*/
modifyValueOnWheel: {
  modifyValue: true,
  doNothing  : false,
},
 
/* Adds brackets on negative values (ie. transforms '-$ 999.99' to '($999.99)')
* Those brackets are visible only when the field does NOT have the focus.
* The left and right symbols should be enclosed in quotes and separated by a comma.
*/
negativeBracketsTypeOnBlur: {
  parentheses           : '(,)',
  brackets              : '[,]',
  chevrons              : '<,>',
  curlyBraces           : '{,}',
  angleBrackets         : '〈,〉',
  japaneseQuotationMarks: 'ï½¢,ï½£',
  halfBrackets          : '⸤,⸥',
  whiteSquareBrackets   : '⟦,⟧',
  quotationMarks        : '‹,›',
  guillemets            : '«,»',
  none                  : null, // This is the default value, which deactivate this feature
},
 
/* Placement of the negative/positive sign relative to the `currencySymbol` option.
*
* Example:
* // Default values
* -1,234.56  => default no options required
* $-1,234.56 => {currencySymbol: "$", negativePositiveSignPlacement: "r"} // Default if negativePositiveSignPlacement is 'null' and currencySymbol is not empty
*
* // Sign on the left hand side of the whole number
* -$1,234.56 => {currencySymbol: "$"} or {currencySymbol: "$", negativePositiveSignPlacement: "l"}
* -1,234.56$ => {currencySymbol: "$", currencySymbolPlacement: "s", negativePositiveSignPlacement: "p"} // Default if negativePositiveSignPlacement is 'null' and currencySymbol is not empty
*
* // Sign on the right hand side of the whole number
* 1,234.56-  => {negativePositiveSignPlacement: "s"}
* $1,234.56- => {currencySymbol: "$", negativePositiveSignPlacement: "s"}
* 1,234.56-$ => {currencySymbol: "$", currencySymbolPlacement: "s"}
* 1,234.56$- => {currencySymbol: "$", currencySymbolPlacement: "s", negativePositiveSignPlacement: "r"}
*/
negativePositiveSignPlacement: {
  prefix: 'p',
  suffix: 's',
  left  : 'l',
  right : 'r',
  none  : null,
},
 
/* Defines the negative sign symbol.
* It can be a string of only one character.
*/
negativeSignCharacter: {
  hyphen         : '-',
  minus          : '−',
  heavyMinus     : '➖',
  fullWidthHyphen: '－',
  circledMinus   : '⊖',
  squaredMinus   : '⊟',
  triangleMinus  : '⨺',
  plusMinus      : '±',
  minusPlus      : '∓',
  dotMinus       : '∸',
  minusTilde     : '≂',
  not            : '¬',
},
 
/*
* Defines if the negative sign should be toggled when hitting the negative or positive key multiple times.
* When `toggle` is used, using the same '-' on '+' key will toggle between a positive and negative value.
* When `doNotToggle` is used, using '-' will always set the value negative, and '+' will always set the value positive.
*/
negativePositiveSignBehavior: {
  toggle     : true,
  doNotToggle: false,
},
 
/* Defines if the element should have event listeners activated on it.
* By default, those event listeners are only added to <input> elements and html element with the `contenteditable` attribute set to `true`, but not on the other html tags.
* This allows to initialize elements without any event listeners.
* Warning: Since AutoNumeric will not check the input content after its initialization, using some autoNumeric methods afterwards *will* probably leads to formatting problems.
*/
noEventListeners: {
  noEvents : true,
  addEvents: false,
},
 
/* Manage how autoNumeric react when the user tries to paste an invalid number.
* - 'error'    : (This is the default behavior) The input value is not changed and an error is output in the console.
* - 'ignore'   : idem than 'error', but fail silently without outputting any error/warning in the console.
* - 'clamp'    : if the pasted value is either too small or too big regarding the minimumValue and maximumValue range, then the result is clamped to those limits.
* - 'truncate' : autoNumeric will insert as many pasted numbers it can at the initial caret/selection, until everything is pasted, or the range limit is hit.
*                The non-pasted numbers are dropped and therefore not used at all.
* - 'replace'  : autoNumeric will first insert as many pasted numbers it can at the initial caret/selection, then if the range limit is hit, it will try
*                to replace one by one the remaining initial numbers (on the right side of the caret) with the rest of the pasted numbers.
*
* Note 1 : A paste content starting with a negative sign '-' will be accepted anywhere in the input, and will set the resulting value as a negative number
* Note 2 : A paste content starting with a number will be accepted, even if the rest is gibberish (ie. '123foobar456').
*          Only the first number will be used (here '123').
* Note 3 : The paste event works with the `decimalPlacesShownOnFocus` option too.
*/
onInvalidPaste: {
  error   : 'error',
  ignore  : 'ignore',
  clamp   : 'clamp',
  truncate: 'truncate',
  replace : 'replace',
},
 
/* Defines how the value should be formatted when wanting a 'localized' version of it.
* - null or 'string' => 'nnnn.nn' or '-nnnn.nn' as text type. This is the default behavior.
* - 'number'         => nnnn.nn or -nnnn.nn as a Number (Warning: this works only for integers inferior to Number.MAX_SAFE_INTEGER)
* - ',' or '-,'      => 'nnnn,nn' or '-nnnn,nn'
* - '.-'             => 'nnnn.nn' or 'nnnn.nn-'
* - ',-'             => 'nnnn,nn' or 'nnnn,nn-'
*
* Note: The hyphen '-' is translated to the custom negative sign defined in `negativeSignCharacter`
*/
outputFormat: {
  string       : 'string',
  number       : 'number',
  dot          : '.',
  negativeDot  : '-.',
  comma        : ',',
  negativeComma: '-,',
  dotNegative  : '.-',
  commaNegative: ',-',
  none         : null,
},
 
/* Defines if AutoNumeric should let the user override the minimum and/or maximum limits when he types numbers in the element.
* - 'ceiling' Strictly adheres to `maximumValue` and ignores the `minimumValue` settings
*             It allows the user to enter anything between -∞ `and maximumValue`
*             If `maximumValue` is less than 0, then it will prevent the user emptying the field or typing value above `maximumValue`, making sure the value entered is always valid
* - 'floor'   Strictly adheres to `minimumValue` and ignores the `maximumValue` settings
*             It allows the user to enter anything between `minimumValue` and +∞
*             If `minimumValue` is higher than 0, then it will prevent the user emptying the field or typing value below `minimumValue`, making sure the value entered is always valid
* - 'ignore'  Ignores both the `minimumValue` and `maximumValue` settings
*             When using this option, the field will always be valid range-wise
* - 'invalid' The user can temporarily type out-of-bound values. In doing so, the invalid state is set on the field.
*             Whenever an invalid value is typed, an 'autoNumeric:invalidValue' event is sent
*             When the value is correctly set back within the limit boundaries, the invalid state is removed, and the 'autoNumeric:correctedValue' event is sent
* - 'doNotOverride' Strictly adheres to the `maximumValue` and `minimumValue` settings
*                   This is the default behavior
*                   If `0` is out of the min/max range, this will prevent the user clearing the input field, making sure the value entered is always valid
*/
overrideMinMaxLimits: {
  ceiling      : 'ceiling',
  floor        : 'floor',
  ignore       : 'ignore',
  invalid      : 'invalid',
  doNotOverride: null,
},
 
/* Defines the positive sign symbol.
* It can be a string of only one character.
* This is shown only if `showPositiveSign` is set to `true`.
*/
positiveSignCharacter: {
  plus              : '+',
  fullWidthPlus     : '＋',
  heavyPlus         : '➕',
  doublePlus        : '⧺',
  triplePlus        : '⧻',
  circledPlus       : '⊕',
  squaredPlus       : '⊞',
  trianglePlus      : '⨹',
  plusMinus         : '±',
  minusPlus         : '∓',
  dotPlus           : '∔',
  altHebrewPlus     : '﬩',
  normalSpace       : ' ',
  thinSpace         : '\u2009',
  narrowNoBreakSpace: '\u202f',
  noBreakSpace      : '\u00a0',
},
 
/* The `rawValueDivisor` divides the formatted value shown in the AutoNumeric element and store the result in `rawValue`.
* @example { rawValueDivisor: '100' } or <input data-raw-value-divisor="100">
* Given the `0.01234` raw value, the formatted value will be displayed as `'1.234'`.
* This is useful when displaying percentage for instance, and avoid the need to divide/multiply by 100 between the number shown and the raw value.
*/
rawValueDivisor: {
  none      : null,
  percentage: 100,
  permille  : 1000,
  basisPoint: 10000,
},
 
/* Defines if the element (`<input>` or another allowed html tag) should be set as read-only on initialization.
* When set to `true`, then:
* - the `readonly` html property is added to the <input> element on initialization, or
* - the `contenteditable` attribute is set to `false` on non-input elements.
*/
readOnly: {
  readOnly : true,
  readWrite: false,
},
 
/* Defines the rounding method to use.
* roundingMethod: "S", Round-Half-Up Symmetric (default)
* roundingMethod: "A", Round-Half-Up Asymmetric
* roundingMethod: "s", Round-Half-Down Symmetric (lower case s)
* roundingMethod: "a", Round-Half-Down Asymmetric (lower case a)
* roundingMethod: "B", Round-Half-Even "Bankers Rounding"
* roundingMethod: "U", Round Up "Round-Away-From-Zero"
* roundingMethod: "D", Round Down "Round-Toward-Zero" - same as truncate
* roundingMethod: "C", Round to Ceiling "Toward Positive Infinity"
* roundingMethod: "F", Round to Floor "Toward Negative Infinity"
* roundingMethod: "N05" Rounds to the nearest .05 => same as "CHF" used in 1.9X and still valid
* roundingMethod: "U05" Rounds up to next .05
* roundingMethod: "D05" Rounds down to next .05
*/
roundingMethod: {
  halfUpSymmetric                : 'S',
  halfUpAsymmetric               : 'A',
  halfDownSymmetric              : 's',
  halfDownAsymmetric             : 'a',
  halfEvenBankersRounding        : 'B',
  upRoundAwayFromZero            : 'U',
  downRoundTowardZero            : 'D',
  toCeilingTowardPositiveInfinity: 'C',
  toFloorTowardNegativeInfinity  : 'F',
  toNearest05                    : 'N05',
  toNearest05Alt                 : 'CHF',
  upToNext05                     : 'U05',
  downToNext05                   : 'D05',
},
 
/* Set to `true` to allow the `decimalPlacesShownOnFocus` value to be saved with sessionStorage
* If IE 6 or 7 is detected, the value will be saved as a session cookie.
*/
saveValueToSessionStorage: {
  save     : true,
  doNotSave: false,
},
 
/* Determine if the select all keyboard command will select the complete input text, or only the input numeric value
* Note : If the currency symbol is between the numeric value and the negative sign, only the numeric value will be selected
*/
selectNumberOnly: {
  selectNumbersOnly: true,
  selectAll        : false,
},
 
/* Defines if the element value should be selected on focus.
* Note: The selection is done using the `selectNumberOnly` option.
*/
selectOnFocus: {
  select     : true,
  doNotSelect: false,
},
 
/* Defines how the serialize functions should treat the spaces.
* Those spaces ' ' can either be converted to the plus sign '+', which is the default, or to '%20'.
* Both values being valid per the spec (http://www.w3.org/Addressing/URL/uri-spec.html).
* Also see the summed up answer on http://stackoverflow.com/a/33939287.
*
* tl;dr : Spaces should be converted to '%20' before the '?' sign, then converted to '+' after.
* In our case since we serialize the query, we use '+' as the default (but allow the user to get back the old *wrong* behavior).
*/
serializeSpaces: {
  plus   : '+',
  percent: '%20',
},
 
/* Defines if the element value should be converted to the raw value on focus (and back to the formatted on blur).
* If set to `true`, then autoNumeric remove the thousand separator, currency symbol and suffix on focus.
* Example:
* If the input value is '$ 1,999.88 suffix', on focus it becomes '1999.88' and back to '$ 1,999.88 suffix' on blur.
*/
showOnlyNumbersOnFocus: {
  onlyNumbers: true,
  showAll    : false,
},
 
/* Allow the positive sign symbol `+` to be displayed for positive numbers.
* By default, this positive sign is not shown.
* The sign placement is controlled by the 'negativePositiveSignPlacement' option, mimicking the negative sign placement rules.
*/
showPositiveSign: {
  show: true,
  hide: false,
},
 
/* Defines if warnings should be shown in the console.
* Those warnings can be ignored, but are usually printed when something could be improved by the user (ie. option conflicts).
*/
showWarnings: {
  show: true, // All warning are shown
  hide: false, // No warnings are shown, only the thrown errors
},
 
/* Defines the rules that calculate the CSS class(es) to apply on the element, based on the raw unformatted value.
* This can also be used to call callbacks whenever the `rawValue` is updated.
* Important: all callbacks must return `null` if no ranges/userDefined classes are selected
* @example
* {
*     positive   : 'autoNumeric-positive', // Or `null` to not use it
*     negative   : 'autoNumeric-negative',
*     ranges     : [
*         { min: 0, max: 25, class: 'autoNumeric-red' },
*         { min: 25, max: 50, class: 'autoNumeric-orange' },
*         { min: 50, max: 75, class: 'autoNumeric-yellow' },
*         { min: 75, max: Number.MAX_SAFE_INTEGER, class: 'autoNumeric-green' },
*     ],
*     userDefined: [
*         // If 'classes' is a string, set it if `true`, remove it if `false`
*         { callback: rawValue => { return true; }, classes: 'thisIsTrue' },
*         // If 'classes' is an array with only 2 elements, set the first class if `true`, the second if `false`
*         { callback: rawValue => rawValue % 2 === 0, classes: ['autoNumeric-even', 'autoNumeric-odd'] },
*         // Return only one index to use on the `classes` array (here, 'class3')
*         { callback: rawValue => { return 2; }, classes: ['class1', 'class2', 'class3'] },
*         // Return an array of indexes to use on the `classes` array (here, 'class1' and 'class3')
*         { callback: rawValue => { return [0, 2]; }, classes: ['class1', 'class2', 'class3'] },
*         // If 'classes' is `undefined` or `null`, then the callback is called with the AutoNumeric object passed as a parameter
*         { callback: anElement => { return anElement.getFormatted(); } },
*     ],
* }
*/
styleRules: {
  none                 : null,
  positiveNegative     : {
      positive: 'autoNumeric-positive',
      negative: 'autoNumeric-negative',
  },
  range0To100With4Steps: {
      ranges: [
          { min: 0, max: 25, class: 'autoNumeric-red' },
          { min: 25, max: 50, class: 'autoNumeric-orange' },
          { min: 50, max: 75, class: 'autoNumeric-yellow' },
          { min: 75, max: 100, class: 'autoNumeric-green' },
      ],
  },
  evenOdd              : {
      userDefined: [
          { callback: rawValue => rawValue % 2 === 0, classes: ['autoNumeric-even', 'autoNumeric-odd'] },
      ],
  },
  rangeSmallAndZero    : {
      userDefined: [
          {
              callback  : rawValue => {
                  if (rawValue >= -1 && rawValue < 0) {
                      return 0;
                  }
                  if (Number(rawValue) === 0) {
                      return 1;
                  }
                  if (rawValue > 0 && rawValue <= 1) {
                      return 2;
                  }
 
                  return null;  // In case the rawValue is outside those ranges
              },
              classes: [
                  'autoNumeric-small-negative',
                  'autoNumeric-zero',
                  'autoNumeric-small-positive',
              ],
          },
      ],
  },
},
 
/* Add a text on the right hand side of the element value.
* This suffix text can have any characters in its string, except numeric characters and the negative/positive sign.
* Example: ' dollars'
*/
suffixText: {
  none      : '',
  percentage: '%',
  permille  : '‰',
  basisPoint: '‱',
},
 
/* The three options (divisorWhenUnfocused, decimalPlacesShownOnBlur & symbolWhenUnfocused) handle scaling of the input when the input does not have focus
* Please note that the non-scaled value is held in data and it is advised that you use the `saveValueToSessionStorage` option to ensure retaining the value
* ["divisor", "decimal places", "symbol"]
* Example: with the following options set {divisorWhenUnfocused: '1000', decimalPlacesShownOnBlur: '1', symbolWhenUnfocused: ' K'}
* Example: focusin value "1,111.11" focusout value "1.1 K"
*/
 
/* The `symbolWhenUnfocused` option is a symbol placed as a suffix when not in focus.
* This is optional too.
*/
symbolWhenUnfocused: {
  none      : null,
  percentage: '%',
  permille  : '‰',
  basisPoint: '‱',
},
 
/* Defines if the element value should be unformatted when the user hover his mouse over it while holding the `Alt` key.
* Unformatting there means that this removes any non-number characters and displays the *raw* value, as understood by Javascript (ie. `12.34` is a valid number, while `12,34` is not).
*
* We reformat back before anything else if :
* - the user focus on the element by tabbing or clicking into it,
* - the user releases the `Alt` key, and
* - if we detect a mouseleave event.
*
* We unformat again if :
* - while the mouse is over the element, the user hit `Alt` again
*/
unformatOnHover: {
  unformat     : true,
  doNotUnformat: false, //TODO Rename to `keepFormat`
},
 
/* Removes the formatting and use the raw value in each autoNumeric elements of the parent form element, on the form `submit` event.
* The output format is a numeric string (nnnn.nn or -nnnn.nn).
*/
unformatOnSubmit: {
  unformat        : true,
  keepCurrentValue: false,
},
 
/* That option is linked to the `modifyValueOnUpDownArrow` one and will only be used if the latter is set to `true`.
* This option will modify the up/down arrow behavior and can be used in two ways, either by setting :
* - a 'fixed' step value (a positive float or integer number (ex: `1000`)), or
* - the `'progressive'` string.
*
* The 'fixed' mode always increment/decrement the element value by that amount, while respecting the `minimumValue` and `maximumValue` settings.
* The 'progressive' mode will increment/decrement the element value based on its current value. The bigger the number, the bigger the step, and vice versa.
*/
upDownStep: {
  progressive: 'progressive',
},
 
/* Provides a way for automatically replacing the formatted value with a pre-defined string, when the raw value is equal to a specific value
* Here you can specify as many 'conversion' as needed.
*/
valuesToStrings: {
  none         : null,
  zeroDash     : {
      0: '-',
  },
  oneAroundZero: {
      '-1': 'Min',
      1   : 'Max',
  },
},
 
/* Defines if the AutoNumeric element should watch external changes made without using `.set()`, but by using the basic `aNElement.node().value = 42` notation.
* If set to `watch`, then AutoNumeric will format the new value using `.set()` internally.
* Otherwise it will neither format it, nor save it in the history.
*/
watchExternalChanges: {
  watch     : true,
  doNotWatch: false,
},
 
/* Defines when the wheel event will increment or decrement the element value.
* When set to `'focus'`, the AutoNumeric-managed element needs to be focused for the wheel event to change the value.
* When set to `'hover'`, using the wheel event while the mouse is hovering the element is sufficient (no focus needed).
*
* Note :
* When `wheelOn` is set to `'focus'`, you can use the 'Shift' modifier key while using the mouse wheel in order to temporarily activate the increment/decrement feature even if the element is not focused.
* When `wheelOn` is set to `'hover'`, you can use the 'Shift' modifier key while using the mouse wheel in order to temporarily disable the increment/decrement feature even if the element is not hovered.
*/
wheelOn: {
  focus: 'focus',
  hover: 'hover',
},
 
/* That option is linked to the `modifyValueOnWheel` one and will only be used if the latter is set to `true`.
* This option will modify the wheel behavior and can be used in two ways, either by setting :
* - a 'fixed' step value (a positive float or integer (ex: number `1000`)), or
* - the `'progressive'` string.
*
* The 'fixed' mode always increment/decrement the element value by that amount, while respecting the `minimumValue` and `maximumValue` settings.
* The 'progressive' mode will increment/decrement the element value based on its current value. The bigger the number, the bigger the step, and vice versa.
*/
wheelStep: {
  progressive: 'progressive',
},

更新日志：

第4.8.2版（2023-04-04）

• 调用_historyTableAdd（）函数时避免“强制回流”

第4.8.1版（2023-03-24）

• 添加功能：不允许用“+”和“-”键切换正负号。这为管理“-”和“+”键行为添加了一个新选项negativePositiveSignBehavior
• 更新依赖于切换行为的现有端到端测试
• 修复设置无效的positiveSignCharacter选项时出现的错误消息
• 尝试修复Travis CI中的“node:18”错误
• 修复了最小化分发文件中的版权横幅未定义的问题
• 从package.json中删除未使用的wdio脚本
• 默认情况下，-和+键将不再切换AutoNumeric元素的负/正状态。
• 此版本中的默认行为已更改，使用“-”或“+”键在正值和负值之间切换不会被激活，而是-将尝试将值设置为负值，+将尝试将其设置为正值（如果结果值超出范围，则此操作可能失败）。
• 如果要使用以前的行为，请在选项配置中设置negativePositiveSignBehavior:AutoNumeric.options.negativePositiveSignBehavior。toggle。

版本4.7.0（2023-03-21）

• 错误修复程序
• 添加两个新选项来控制上下箭头键的行为：modifyValueOnUpDownArrow和upDownStep

第4.6.3版（2023-03-18）

• 错误修复程序

版本4.6.2（2023-03-07）

• 错误修复程序

版本4.6.1（2023-03-07）

• 更新所有依赖项
• 删除PhantomJS依赖项以支持Puppeteer
• 完成validate（）函数，并以数字形式对新的allowDecimalPadding选项进行额外测试
• 将默认导出添加到模块
• 错误修复程序

版本4.6.0（2022-02-14）

• 允许用户输入超出“minimumValue”和“maximumValue”范围的绑定数字

版本4.5.13（2020-02-16）

• 已修复Bug

第4.5.9版（2019-10-12）

• 修正了当前缀位置的currencySymbol包含输入的第一个值（即数值）时，Caret位置设置不正确

第4.5.8版（2019-10-08）

• 错误修复

第4.5.7版（2019-09-13）

• 更新的错误修复（&B）

第4.5.4版（2019-01-14）

• 修复了缺少\u0092数字组分隔符的问题
• 修复了freezeOptions（）可能在某些浏览器中产生问题的问题

第4.5.2版（2019-01-6）

• 已修复：当连续按Backspace或Delete键清除输入字段时，应触发autoNumeric:格式化的事件

第4.5.1版（2018年10月28日）

• 已修复：初始加载时忽略html只读属性
• 修复只读和禁用输入不应处理键盘事件的问题
• 修复公式模式，以便使用带有decimalCharacter的自定义十进制字符集，而不是默认的“”写入浮点数时的字符

第4.5.0版（2018年10月14日）

• 输入=12*78等表达式时允许进行基本计算
• 添加formulaMode选项，默认设置为false，用于控制是否启用公式模式
• 添加Lexer、Parser、Evaluator、ASTNode和Token类，用于管理数学表达式
• 修复Dist文件中包含eval的问题
• 合并4.4.1中的更改，同时确保没有与#609的回归；这将在package.json中的主字段旁边添加浏览器字段。注意：浏览器选项指向缩小的库dist/autoNumeric.min.js
• 更新index.html测试文件以使用未缩小的开发库dist/autoNumeric.js这允许在调试时临时使用禁用的函数，如控制台或错误的格式，使用yarn build:dev
• 修复了对_reformatAltHoverd（）的调用，即使unfmatOnHover选项设置为false

版本4.4.3（2018-09-24）

• 已修复：设置为false时不使用unfmatOnHover配置值

第4.4.2版（2018-09-15）

• 修复了未捕获的错误：在v4.4.1上找不到模块“autonumeric”

版本4.4.1（2018-09-13）

• 将package.json配置主字段修改为浏览器

v4.4.0版（2018年8月04日）

• 添加一个功能，其中emptyInputBehavior可以设置为最小值或最大值，emptyInput Behavior现在接受数字（或表示数字的字符串），或“min”或“max”选项
• 修复检查值限制时的emptyInputBehavior验证测试
• 允许emptyInputBehavior设置为min、max或数字

版本4.3.7（2018-07-28）

• 修正：键入减号后预设欧元/法语的空字段的货币位置错误
• 修正了：在负号BracketsTypeOnBlur输入中输入单个减号会反转货币符号和减号

版本4.3.6（2018-07-27）

• 已修复：重新打开的“表单重置错误”
• AutoNumeric现在侦听父窗体上的重置事件，并在检测到时做出相应反应

第4.3.4版（2018年7月26日）

• 已修复：根据光标移动不触发更改事件

第4.3.3版（2018年7月24日）

• 修正了将负值粘贴到负值上，该负值作为货币符号及其选定的数字会引发错误
• 通过删除重复的部分来重构_onPast（）处理程序
• 修复初始化调用new AutoNumeric（）时，将字符串（元素选择器）、数字（初始值）和数组（选项数组）按特定顺序用作参数将无法识别的问题

第4.3.1版（2018-07-24）

• 精确地修改10万亿和10亿的限额
• 删除maximumValue和minimumValue tenTrillionsNoDecimals选项，并更新tenTrillions，使其等于10万亿
• 10万亿次期权现在等于“10000000000000”，10亿次期权现在相当于“1000000000”
• 自从我们在v4.0.0-beta.22中修改了用户如何使用decimalPlaces选项定义小数位数，而不是在最小/最大值中添加特定的小数位数以来，早就应该进行此更改了。

版本4.3.0（2018-06-02）

• 允许带有readOnly选项的非输入标记将contenteditable属性设置为false
• 修复只读属性和内容可编辑属性，以便将它们更新为读/写模式
• 修改_setRadOnly（），使其始终将元素设置为只读模式
• 创建一个新的_setRadWrite（）函数，将元素设置为读写模式
• 创建一个新的_setWritePermissions（）函数，根据readOnly设置设置元素的只读/写模式
• 目前作为一个纯JAVASCRIPT库工作。
• 已修复-选项更新时未设置/重置事件侦听器。
• 修正了冻结选项时Internet Explorer 11抛出的问题

预览截图

简易数字和货币格式库 autoNumeric