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()在大多数文档中正确初始化输入，因此我必须使用上面的“新AutoNumeric”，这在某些文档中也很奇怪，并且是唯一有效的方法：

Answer 1

好像你一直在阅读AutoNumeric插件旧API的文档。该插件已被重写，因为它们独立于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 键时，即。键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发送的AutoNumeric文档。另外checkout如何将callbacks添加到所有get*函数中。

jQuery / AutoNumeric - 所有方法都返回'.autoNumeric不是函数 - 无法格式化数字

2 个答案: