AutoNumeric 从 v1.9/v2 升级到 v4 完全指南-CSDN博客

AutoNumeric 从 v1.9/v2 升级到 v4 完全指南

前言

AutoNumeric 是一个强大的 JavaScript 库，专门用于格式化数字输入和显示。随着版本 4 的发布，AutoNumeric 进行了重大重构，带来了许多新特性和改进。本文将详细介绍如何从旧版本（1.9.x 或 2.x）平滑升级到最新的 4.x 版本。

主要变化概述

版本 4 的主要变化包括：

从 jQuery 插件转变为原生 ES6 模块
配置选项名称的重大变更
API 调用方式的改进
新增多项功能特性

初始化方式变更

旧版本初始化方式（v1.9/v2）

在旧版本中，AutoNumeric 作为 jQuery 插件使用，初始化方式如下：

$('.myInput').autoNumeric('init', { options });

新版本初始化方式（v4）

版本 4 移除了 jQuery 依赖，采用原生 JavaScript 实现：

单个元素初始化：

new AutoNumeric('.myInput', { options });

多个元素批量初始化：

AutoNumeric.multiple('.myCssClass > input', { options });

配置选项变更

版本 4 对配置选项进行了全面重命名，使语义更加清晰。以下是新旧选项名称对照表：

| 旧选项名 (v1.9/v2) | 新选项名 (v4) | 说明 | |-------------------|--------------|------| | aSep | digitGroupSeparator | 数字分组分隔符 | | nSep | showOnlyNumbersOnFocus | 聚焦时是否只显示数字 | | dGroup | digitalGroupSpacing | 数字分组间距 | | aDec | decimalCharacter | 小数点字符 | | altDec | decimalCharacterAlternative | 备用小数点字符 | | aSign | currencySymbol | 货币符号 | | pSign | currencySymbolPlacement | 货币符号位置 | | pNeg | negativePositiveSignPlacement | 正负号位置 | | aSuffix | suffixText | 后缀文本 | | oLimits | overrideMinMaxLimits | 是否覆盖最小/最大值限制 | | vMax | maximumValue | 最大值 | | vMin | minimumValue | 最小值 | | mDec | decimalPlacesOverride | 小数位数覆盖（已弃用） | | eDec | decimalPlacesShownOnFocus | 聚焦时显示的小数位数 | | scaleDecimal | decimalPlacesShownOnBlur | 失焦时显示的小数位数 | | aStor | saveValueToSessionStorage | 是否保存值到会话存储 | | mRound | roundingMethod | 舍入方法 | | aPad | allowDecimalPadding | 是否允许小数填充 | | nBracket | negativeBracketsTypeOnBlur | 失焦时负数括号类型 | | wEmpty | emptyInputBehavior | 空输入行为 | | lZero | leadingZero | 前导零处理 | | aForm | formatOnPageLoad | 页面加载时是否格式化 | | sNumber | selectNumberOnly | 是否仅选择数字 | | anDefault | defaultValueOverride | 默认值覆盖 | | unSetOnSubmit | unformatOnSubmit | 提交时是否取消格式化 | | outputType | outputFormat | 输出格式 | | debug | showWarnings | 是否显示警告 |

重要变更说明：

mDec（或 v2 中的 decimalPlacesOverride）选项已被弃用
现在使用 decimalPlaces 全局设置小数位数
新增 decimalPlacesShownOnFocus 和 decimalPlacesShownOnBlur 分别控制聚焦和失焦时显示的小数位数
新增 decimalPlacesRawValue 控制原始值的小数位数

API 方法变更

版本 4 的方法调用方式更加直观，支持链式调用：

| 旧方法 (v1.9/v2) | 新方法 (v4) | 说明 | |----------------|------------|------| | $(someSelector).autoFormat('1234.56', { options }) | AutoNumeric.format(1234.56, { options }) | 格式化数字 | | $(someSelector).autoUnFormat('1.234,56 €', { options }) | AutoNumeric.unformat('1.234,56 €', { options }) | 取消格式化 | | $(someSelector).autoValidate({ options }) | AutoNumeric.validate({ options }) | 验证值 | | $.fn.autoNumeric.defaults | AutoNumeric.getDefaultConfig() | 获取默认配置 | | $(someSelector).autoNumeric("destroy") | anElement.remove() | 移除实例 | | $(someSelector).autoNumeric('get') | anElement.getNumericString() | 获取数字字符串 | | $(someSelector).autoNumeric('getArray') | anElement.formArrayNumericString() | 获取数组形式的数字字符串 | | $(someSelector).autoNumeric('getFormatted') | anElement.getFormatted() | 获取格式化后的值 | | $(someSelector).autoNumeric('getLocalized') | anElement.getLocalized() | 获取本地化值 | | $(someSelector).autoNumeric('getNumber') | anElement.getNumber() | 获取数字值 | | $(someSelector).autoNumeric('getString') | anElement.formNumericString() | 获取数字字符串 | | $.fn.autoNumeric.lang | AutoNumeric.getPredefinedOptions() | 获取预定义选项 | | $(someSelector).autoNumeric('reSet') | anElement.reformat() | 重新格式化 | | $(someSelector).autoNumeric('set', '12345.67') | anElement.set(12345.67) | 设置值 | | $(someSelector).autoNumeric('unSet') | anElement.unformat() | 取消格式化 | | $(someSelector).autoNumeric("update", { options }) | anElement.update({ options }) | 更新配置 | | $(someSelector).autoNumeric("wipe") | anElement.wipe() | 清除值 |