所有方法 return '.autoNumeric 不是函数 - 无法取消格式化数字

Question

我正在尝试获取使用 autoNumeric 格式化的输入数字的原始值，但不能因为我尝试使用它返回 '.autoNumeric 不是函数' 在控制台中。

$(document).ready(function() {

    new AutoNumeric('#input',  AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);
    
    $('#input').on('keyup', function() {
     $('#output').val($('#input').autoNumeric('getString'));
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/4.0.3/autoNumeric.js"></script>

<input id="input" name="basicPayPerYearInput" type="text" value="123456.78" placeholder="0.00" class="currencyInput validate">

<input type="text" for="basicPayPerYearInput" id="output">

我什至无法像大多数使用 $(selector).autoNumeric() 的文档中所写的那样正确初始化输入，所以我不得不使用上面的 'new AutoNumeric'，这在某些文档中也很奇怪地使用这是唯一可行的方法：

Answer 1

您似乎一直在阅读旧 API AutoNumeric 插件的文档。该插件已被重写，因为它们独立于 jQuery，这意味着 .autoNumeric() 不再是有效的 jQuery 方法。

你想要做的是在运行时存储 AutoNumeric 实例，然后简单地使用实例上的 getter method .getNumericString() 来检索它的字符串值：

// Store instance
var autoNumericInstance = new AutoNumeric('#input', AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);

$('#input').on('keyup', function() {
    // Retrieve instance numeric string value
    $('#output').val(autoNumericInstance.getNumericString());
});

请参阅此处的概念验证示例（或 updated fiddle）：

$(document).ready(function() {

    var autoNumericInstance = new AutoNumeric('#input', AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);
    
    $('#input').on('keyup', function() {
     $('#output').val(autoNumericInstance.getNumericString());
    });
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/4.0.3/autoNumeric.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<input id="input" name="basicPayPerYearInput" type="text" value="123456.78" placeholder="0.00" class="currencyInput validate">

<input type="text" for="basicPayPerYearInput" id="output">

Answer 2

@Terry 对于所提问题的回答是完全正确的，但是我建议不要在您的 #input keyup 事件中使用事件侦听器，因为 AutoNumeric not 总是更新每个 keyup 上的元素值，例如当用户输入 bad 键时， IE。关键 A.

如果您只想在确实更改时用数字字符串更新您的 #output 元素，那么您应该监听自定义事件 'autoNumeric:rawValueModified' , 所以:

而不是：

$('#input').on('keyup', function() {
    $('#output').val(autoNumericInstance.getNumericString());
});

你应该使用：

const outputElm = document.querySelector('#output');
const inputElm = document.querySelector('#input');
inputElm.addEventListener('autoNumeric:rawValueModified', e => {
    outputElm.value = e.newRawValue;
});

关于 custom events sent by AutoNumeric 的文档。还有 checkout 如何将 callbacks 添加到所有 get* 函数。

所有方法 return '.autoNumeric 不是函数 - 无法取消格式化数字

All methods return '.autoNumeric is not a function - Can't unformat numbers

javascript

jquery

number-formatting

autonumeric.js