Jquery adding commas to input number with decimals while typing

Question

I am trying to add commas to an input text that allows a number while typing it. But should also allow decimals. Here is my code for the numbers only, just can't figure out the decimal thing.

$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40){
   event.preventDefault();
  }

  $(this).val(function(index, value) {
     return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  });
});

If anyone has a solution that would be great thx.

Fiddle: http://jsfiddle.net/yWTLk/348/

UPDATE: Some good comments, but perhaps can anyone think of a way to have input text field which its editable and at same time formats your number with commas and respects decimals. Something tells me its nearly impossible to do this but let's see if anyone can think of a solution.

And the reason why its good to have auto format while typing is because if you are entering a very large number you might get lost while doing it. For example:

  10000000000000000000000000000000000000000000

That would be a nightmare to enter correctly, hence auto format would tell you if you are missing or not a zero. On the other hand validating it afterwards will show u the error and perhaps yes you can correct it but its an extra step.

Paste without keyboard. Also it is basically impossible to edit the number if you type it wrong. — epascarello, Apr 15 '14 at 15:30
From a user experience point of view, I would **highly** recommend letting them enter their value and then, if the value is valid, update the format afterwards. Auto-formatting as the user is typing can make for a highly frustrating interface. — talemyn, Apr 15 '14 at 15:30
i agree, just need to have it done in real time. Other option is once they click off then they value can be updated. — Hard Fitness, Apr 15 '14 at 15:36
possible duplicate of [jQuery function to to format number with commas and decimal](http://stackoverflow.com/questions/14075014/jquery-function-to-to-format-number-with-commas-and-decimal) — epascarello, Apr 15 '14 at 16:04
@epascarello not duplicate, the other one does not do it inline. — Hard Fitness, Apr 15 '14 at 17:56
Dude, it gives you the functionality you are after with the decimal. What you asked for right off the bat. — epascarello, Apr 15 '14 at 18:01
Notice that if you use the input type=number the script doesn't work correctly — GabAntonelli, Mar 14 '16 at 18:27

score 12 · Answer 1 · answered Apr 15 '14 at 16:07

Could do this, but what I would do instead is show the comma separated number elsewhere besides the input field.

$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40){
   event.preventDefault();
  }

  $(this).val(function(index, value) {
      value = value.replace(/,/g,''); // remove commas from existing input
      return numberWithCommas(value); // add commas back in
  });
});

function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}

http://jsfiddle.net/jpAmE/

It works, even if I insert more decimals. Thanks – user2342558 Jun 30 '21 at 09:35 — user2342558, Jun 30 '21 at 09:35

score 10 · Answer 2 · answered Apr 15 '14 at 16:58

I think this might do what you are looking for. Assumptions:

Users are only allowed to enter one decimal point.
no formatting is allowed after the decimal point, i.e. commas.

Fiddle

$('input.number').keyup(function (event) {
    // skip for arrow keys
    if (event.which >= 37 && event.which <= 40) {
        event.preventDefault();
    }

    var currentVal = $(this).val();
    var testDecimal = testDecimals(currentVal);
    if (testDecimal.length > 1) {
        console.log("You cannot enter more than one decimal point");
        currentVal = currentVal.slice(0, -1);
    }
    $(this).val(replaceCommas(currentVal));
});

function testDecimals(currentVal) {
    var count;
    currentVal.match(/\./g) === null ? count = 0 : count = currentVal.match(/\./g);
    return count;
}

function replaceCommas(yourNumber) {
    var components = yourNumber.toString().split(".");
    if (components.length === 1)
        components[0] = yourNumber;
    components[0] = components[0].replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    if (components.length === 2)
        components[1] = components[1].replace(/\D/g, "");
    return components.join(".");
}

It works, even if I insert more decimals. Thanks – user2342558 Jun 30 '21 at 09:27 — user2342558, Jun 30 '21 at 09:27

Jquery adding commas to input number with decimals while typing

2 Answers2