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

Answer 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

Answer 2

Your logic is defeated by its own.

Here is what you are currently doing:

1. ask the user to input a series of digits and only digits
2. parse the input into an integer
3. 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:

1. 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

2. Try to detect if the input is a valid number or not
3. if not, then provide a negative feedback to the user
4. if yes, then provide a positive feedback
5. 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>

Answer 3

This function help you:

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

Output:

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