Comma separated step for float number input

Question

I want to comma seperated value for my input box. For Example 2100000.90 will be 2,100,000.90. What I achieved is 2100000.90 to 2,100,000 from some Solution in Stack overflow

<div class="input">
  <label for="salary">Salary</label>
  <input class='inp_cont' id="salary" name="salary" placeholder="Enter your salary" required="" type="text">
</div>

And My Javascript is

document.getElementById('salary').addEventListener('input', event =>
    event.target.value = (parseInt(event.target.value.replace(/[^\d]+/gi, '')) || 0).toLocaleString('en-US')
);

I want both comma separated and value after point.

Thanks in advance

Ahmad · Accepted Answer · 2022-09-11 08:50:29Z

Your logic is defeated by its own.

Here is what you are currently doing:

ask the user to input a series of digits and only digits
parse the input into an integer
format the integer in the en-US locale

what will happen when the user tries to input a decimal point? It will automatically be removed by the regex replace.

What you need to do is the following:

Allow the user to input digits and decimal points

That will mess up if the user types more than one decimal point, but that can be detected and dealt with later

Try to detect if the input is a valid number or not
if not, then provide a negative feedback to the user
if yes, then provide a positive feedback
most important: the process of converting text to number will get rid of the decimal point if it is the last character in the input box. The user will not see the dot since the conversion from text to number will see that it is the last thing and it's not affecting the number, so it is removed, and the user doesn't know why.

Therefor, it is essential to add the "dot" back if it is the last thing typed by the user.

document.getElementById('salary').addEventListener('input', event => {
  event.preventDefault();

  // allow only digits and dots
  let text = event.target.value.replace(/[^\d\.]/gi, '');

  // check if last character is a dot
  let lastCharIsAdot = text.substr(text.length - 1, 1) === ".";

  // try to check if input text is a valid number
  if (isNaN(text)) {
    // if not, then give feedback to the user
    event.target.classList.remove('valid');
    event.target.classList.add('invalid');

  } else {
    // if yes, then give positive feedback
    event.target.classList.remove('invalid');
    event.target.classList.add('valid');

    // format number
    event.target.value = Number(text).toLocaleString("en-US");
    // this will remove the dot if it is the last thing input
    // therefor, we need to put it back

    if (lastCharIsAdot) event.target.value += ".";
  }

});

.valid {
  background-color: lightgreen;
  color: darkgreen;
}

.invalid {
  background-color: pink;
  color: maroon;
}

<div class="input">
  <label for="salary">Salary</label>
  <input class='inp_cont' id="salary" name="salary" placeholder="Enter your salary" required="" type="text">
</div>

Angin · Accepted Answer · 2022-09-11 08:19:36Z

1

You can try this

 parseInt(number, 10).toLocaleString()

here is also the link from mozilla docs about Number.prototype.toLocaleString() method. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

answered Sep 11, 2022 at 8:19

Angin

251 silver badge6 bronze badges

Comments

Ali Azmoodeh · Accepted Answer · 2022-09-11 08:15:55Z

0

This function help you :

  function numberWithCommas(x) {
     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }

Output :

   numberWithCommas(88888888.88));  // 88,888,888.88

answered Sep 11, 2022 at 8:15

Ali Azmoodeh

1911 gold badge2 silver badges12 bronze badges

Collectives™ on Stack Overflow

Comma separated step for float number input

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related