Number input field with commas instead of points

Question

I have a number input field like the following:

<input type="number">

Right now, if I write a number, it is displayed like this:

123.456

I would like to display it with a comma separator, but apparently nothing is working!

The desired result is:

123,456

I tried lang="nb", setting a pattern="\d+,\d+" type="text", but none worked.

Both Javascript and HTML answers are welcome!

Check here; http://stackoverflow.com/questions/6178332/force-decimal-point-instead-of-comma-in-html5-number-input-client-side — Laazo, Feb 23 '17 at 08:55
At least on Firefox and Windows, it uses the operating system regional settings (or the `lang` attribute, I'm not fully sure). — Álvaro González, Feb 23 '17 at 08:55
@GôTô I think you're right. That way my [demo](http://jsbin.com/vifodonoco/1/edit?html,output) works on Firefox. — Álvaro González, Feb 23 '17 at 09:00

Akshay Hegde · Accepted Answer · 2017-02-23T09:03:53.187

You can use toLocaleString

 var number = 123456.789;

    // German uses comma as decimal separator and period for thousands
    console.log(number.toLocaleString('de-DE'));
    // → 123.456,789

    // Arabic in most Arabic speaking countries uses Eastern Arabic digits
    console.log(number.toLocaleString('ar-EG'));
    // → ١٢٣٤٥٦٫٧٨٩

    // India uses thousands/lakh/crore separators
    console.log(number.toLocaleString('en-IN'));
    // → 1,23,456.789

    // the nu extension key requests a numbering system, e.g. Chinese decimal
    console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
    // → 一二三,四五六.七八九

    // when requesting a language that may not be supported, such as
    // Balinese, include a fallback language, in this case Indonesian
    console.log(number.toLocaleString(['ban', 'id']));
    // → 123.456,789

gyre · Answer 2 · 2017-02-23T09:15:25.367

I would allow the user to type both kinds of punctuation, and use an event listener to replace all periods in the input value with commas.

When you need to get that value back as a JavaScript number, you can simply call getValueAsNumber with the input element you want to use.

var input = document.querySelector('input')

input.addEventListener('change', function() {
  this.value = this.value.replace(/\./g, ',')
})

function getValueAsNumber(input) {
  return +input.value.replace(/,/g, '.')
}

<label>
  Type a number!
  <input lang="nb" type="text" pattern="\d*[,.]\d+|\d+(?:[,.]\d*)?">
</label>

<button onclick="console.log(getValueAsNumber(input))">
  What number did I type?
</button>

Dheer Jangra · Answer 3 · 2017-02-23T09:48:41.830

As you want this in a input field, you can use Javascript code to do this. Here is a demo code. I have done this on a keyup function you can do this on change too.

https://jsfiddle.net/Dheer_Jangra/rfx34op8/2/

var x;

$('#number').on("keyup", function() {
  x = removeCommas(this.value);
  this.value = addCommas(x);
});

function addCommas(nStr)
{
  nStr += '';
  x = nStr.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  }
  return x1 + x2;
}

function removeCommas(value){
  value=value.replace(/\,/g,'');
  value=parseInt(value,10);
  return value;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="number"/>

Number input field with commas instead of points

3 Answers3