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

z3yyvxxp  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(140)

我需要你的帮助AutoNumeric JS。
我使用input和span的方式是:

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

我在JavaScript中使用AutoNumeric是这样的:

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

并输出如下:

1.750,15

我需要这个

1750.15

我的问题是,当货币中的数据发生变化时,如何在value_currency中动态打印。但我需要的是原始值而不是格式化值。谢谢你。

gblwokeq

gblwokeq1#

为了对大家有所帮助,我最终使用了AutoNumeric静态方法'getNumber'
https://docs.autonumeric.org/Documentation/static%20methods/
在这种情况下:

AutoNumeric.getNumber('#currency');
enyaitl3

enyaitl32#

下面的代码使用jquery来跟踪#currency输入的更改,我使用了广泛的事件触发器,以便代码在任何keydownpaste等更改上运行。您可能需要调整这些以满足您的需求(即减少触发器的数量)。注册触发器事件后,代码执行以下操作:
1.收集输入的.val()作为s字符特灵
1.替换所有非数字或小数点的字符(即您的货币字符)与.replace(/[^\d.-]/g, '')
1.将此新压缩字符串分配给.currency-value.html()
如果您希望字符串中保留逗号(即£ 1,234.56简化为1,234.56,然后将regex函数从.replace(/[^\d.-]/g, '')更改为.replace(/[^\d.,-]/g, '')(即在其中添加逗号)。下面的代码目前删除了逗号。
如果这不是你想要的就告诉我。

基础Demo(土耳其语)

**土耳其里拉被添加到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>

扩展Demo

这个扩展演示允许您使用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 - i.e. 'British', 'Turkish'</li>
  <li>currency-divider - i.e. '.' 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>

相关问题