OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Display html-Input-value as german formatted Number on input-change, while keeping track of decimal number

  • Thread starter Thread starter Lenn
  • Start date Start date
L

Lenn

Guest
So German decimal numbers use a decimal comma. When formatting we also use the period for grouping digits. So the number 10000.45 would be formatted as 10.000,45.

Now I would like to have an input-field (numeric or text) where you can type the "german" way using periods and commas. However, I want to also keep track of a "normal" numeric value in JavaScript.

Converting a numeric value to a german-formatted value is easy with

Code:
  number.toLocaleString("de-DE", { maxFractionDigits: 2 })

But how do I get this backformatted to a decimal number? Because when I display the german-formatted value like "7,20" I append to the end right?

Here is a svelte-repl with an initial try that looks like this: https://svelte.dev/repl/fabd0a80f4ee49509cd875c0175bcf22?version=4.0.1

Code:
<script>
  let numericValue = 0;
  let formattedValue = '';

  function formatNumber(value) {
    return value.toLocaleString("de", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    });
  }

  function handleInput(event) {
    // Remove dots as thousand separators and convert decimal comma to dot
    const inputValue = event.target.value.replace(/\./g, '').replace(/,/g, '.');

    // Update numericValue with parsed float
    numericValue = parseFloat(inputValue);

    // Update formattedValue for display
    formattedValue = formatNumber(numericValue);
  }
</script>

<input type="text" value={formattedValue} on:input={handleInput} />

<p>Numeric value: {numericValue}</p>

Ideally, I would like to have the displayed, formatted value on the input-event. But it can also be on the on-change event. Or even using a button next to it or something. I'd be grateful for any tip!:)

<p>So German decimal numbers use a decimal comma. When formatting we also use the period for grouping digits. So the number 10000.45 would be formatted as 10.000,45.</p>
<p>Now I would like to have an input-field (numeric or text) where you can type the "german" way using periods and commas. However, I want to also keep track of a "normal" numeric value in JavaScript.</p>
<p>Converting a numeric value to a german-formatted value is easy with</p>
<pre><code> number.toLocaleString("de-DE", { maxFractionDigits: 2 })
</code></pre>
<p>But how do I get this backformatted to a decimal number? Because when I display the german-formatted value like "7,20" I append to the end right?</p>
<p>Here is a svelte-repl with an initial try that looks like this:
<a href="https://svelte.dev/repl/fabd0a80f4ee49509cd875c0175bcf22?version=4.0.1" rel="nofollow noreferrer">https://svelte.dev/repl/fabd0a80f4ee49509cd875c0175bcf22?version=4.0.1</a></p>
<pre><code><script>
let numericValue = 0;
let formattedValue = '';

function formatNumber(value) {
return value.toLocaleString("de", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
}

function handleInput(event) {
// Remove dots as thousand separators and convert decimal comma to dot
const inputValue = event.target.value.replace(/\./g, '').replace(/,/g, '.');

// Update numericValue with parsed float
numericValue = parseFloat(inputValue);

// Update formattedValue for display
formattedValue = formatNumber(numericValue);
}
</script>

<input type="text" value={formattedValue} on:input={handleInput} />

<p>Numeric value: {numericValue}</p>

</code></pre>
<p>Ideally, I would like to have the displayed, formatted value on the input-event. But it can also be on the on-change event. Or even using a button next to it or something.
I'd be grateful for any tip!:)</p>
 

Latest posts

A
Replies
0
Views
1
Alvah_Franey
A
H
Replies
0
Views
1
habrewning
H
Top