How to dynamically print the raw value of the input with AutoNumeric js?

I need your help on AutoNumeric js.

I use input and span this way:

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

I'm using AutoNumeric in javascript like this:

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

And output as follows:

1.750,15

I need this:

1750.15

My question is, how do I dynamically print in value_currency when the data in the currency changes. But I need raw values not formatted value. Thank you.

Solution

The code below uses jquery to track when a change is made to the #currency input, I have used broad event triggers so that the code runs on any keydown, paste, etc change. You may want to tweak these to your needs (i.e. reduce the number of triggers). After registering a trigger event the code does the following:

Gathers the .val() of the input as s tring
Replaces all characters that are not numeric or a decimal point (i.e. your currency characters) with .replace(/[^\d.-]/g, '')
Assigns this new condensed string to the .html() of .currency-value.

If you would like commas to remain within the string (i.e. £1,234.56 being simplified to 1,234.56 then change the regex function from .replace(/[^\d.-]/g, '') to .replace(/[^\d.,-]/g, '') (i.e. add a comma within it). The code below currently removes commas.

Let me know if this isn't what you wanted.

Basic Demo (Turkish)

Turkish Lira was added to v4.2.8. This is a basic setup, demonstrating how you can get the raw value just for comma based currencies.

// 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>

Extended Demo

This extended demo allows you to use an attr to store the currency type and also whether it is comma or decimal point based.

// 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>