如何使用AutoNumeric js动态打印输入的原始值？

Question

我需要您对AutoNumeric js的帮助。

我使用输入并以这种方式扩展：

<input type="text" name="currency" id="currency">
<span class="value_currency"></span>

我正在像这样在javascript中使用AutoNumeric：

new AutoNumeric('#currency', 'Turkish');

并输出如下：

1.750,15

我需要这个：

1750.15

我的问题是，当货币中的数据更改时，如何动态在value_curreny中打印。 但是我需要原始值而不是格式化值。 谢谢。

Answer 1

下面的代码使用jquery跟踪对#currency输入进行更改的#currency ，我使用了广泛的事件触发器，因此该代码可在任何keydown ， paste等更改上运行。 您可能需要根据自己的需要进行调整（即减少触发器的数量）。 注册触发事件后，代码将执行以下操作：

1. 收集输入的.val()作为字符串
2. 用.replace(/[^\\d.-]/g, '')替换所有非数字或小数点的字符（即您的货币字符.replace(/[^\\d.-]/g, '')
3. 将此新的压缩字符串分配给.currency-value的.html() 。

如果您希望逗号保留在字符串中（即，将1,234.56英镑简化为1,234.56，则将regex功能从.replace(/[^\\d.-]/g, '')更改为.replace(/[^\\d.,-]/g, '') （即在其中添加逗号）。下面的代码目前删除了逗号。

让我知道这是否不是您想要的。

---

基本演示（土耳其语）

土耳其里拉已添加到v4.2.8。 这是一个基本设置，演示了如何仅获取基于逗号的货币的原始价值。

 // Apply Autonumeric to #currency input new AutoNumeric('#currency', 'Turkish'); // Trigger function of any change to #currency input $("#currency").on("propertychange change keyup paste input", function(){ // Get value from input, replace all non-numeric or '.' values rawValue = $(this).val().replace(/[^\\d,-]/g, ''); // Replace comma with decimal point rawValue = rawValue.replace(",", '.'); // Print value $(".value_currency").html( rawValue ); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/autonumeric@4.5.1/dist/autoNumeric.min.js"></script> <input type="text" name="currency" id="currency"> <span class="value_currency"></span> 

---

扩展演示

通过此扩展的演示，您可以使用attr来存储货币类型，以及是否基于逗号或小数点。

 // Apply Autonumeric to #currency input $("input[currency]").each(function() { // Get id of this element currencyID = $(this).attr("id"); // Apply AutoNumeric to given input new AutoNumeric('#' + currencyID, $(this).attr("currency")); }); // Trigger function of any change to #currency input $("input[currency]").on("propertychange change keyup paste input lostfocus", function() { // Get divider from the element's attribute divider = $(this).attr("currency-divider"); // Create regex expression and apply var regex2 = new RegExp('[^0-9' + divider + ']', 'g'); rawValue = $(this).val().replace(regex2, ''); // Decimalisation of non-decimal based currencies by default if only a single divider is specified // Automatically applied to comma based currencies only if (divider.length == 1 && divider != ".") { rawValue = rawValue.replace(divider, '.'); } // Print raw value $(this).parent().children(".value_currency").html(rawValue); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/autonumeric@4.5.1/dist/autoNumeric.min.js"></script> <p><strong>Automatic decimalisation</strong> is applied if there is only a single character divider added to input. </p> <p>Attributes needed in the inputs include:<p> <ul> <li>currency - ie 'British', 'Turkish'</li> <li>currency-divider - ie '.' or ',' or ',.'</li> </ul> <hr> <div class="currency-wrapper"> <label>Turkish ₺</label> <input type="text" name="currency" id="currencyTurkish" currency-divider="," currency="Turkish"> <span class="value_currency"></span> </div> <hr> <div class="currency-wrapper"> <label>Turkish ₺ (divider set as comma and decimal)</label> <input type="text" name="currency" id="currencyTurkishDouble" currency-divider=".," currency="Turkish"> <span class="value_currency"></span> </div> <hr> <div class="currency-wrapper"> <label>British £</label> <input type="text" name="currency" id="currencyBritish" currency-divider="." currency="British"> <span class="value_currency"></span> </div> <hr> <div class="currency-wrapper"> <label>British £ (no divider set)</label> <input type="text" name="currency" id="currencyBritishNoDivider" currency-divider="" currency="British"> <span class="value_currency"></span> </div> 

Answer 2

万一这对任何人都有帮助，我最终使用了AutoNumeric静态方法“ getNumber”

https://github.com/autoNumeric/autoNumeric/blob/master/README.md#static-methods

在这种情况下：

AutoNumeric.getNumber('#currency');