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

CodePudding user response：

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 >
  <label for="salary">Salary</label>
  <input class='inp_cont' id="salary" name="salary" placeholder="Enter your salary" required="" type="text">
</div>

CodePudding user response：

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

CodePudding user response：

This function help you :

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

Output :

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