Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to add Comma separated Thousands to Number Input?

  • I’d like to add comma separated thousands to number input tag in hybrid app.
    How can i implement it?

  • @wann2 The best way in my experience is to use localString. Here are some examples:

    var number = 1557564534;

    There are options for currency:

    var number = 1234567.22
    number.toLocaleString("en-US",{style:"currency", currency:"USD"});

    All the options can be found here:

  • @munsterlander said:


    Thanks a lot for information. It is helpful.

    May I ask you one more thing?
    I’d like to implement the comma separated thousands when I input numbers inside INPUT tag or after input numbers.
    In web, i used keyup or blur event, but in hybrid it doesn;t work.

  • @wann2 I am making an example:

    function formatValue(){
       var x = Number(document.getElementById('myText').value);
       document.getElementById('myText2').value = x.toLocaleString();
    <input type="text" id="myText" oninput="formatValue()" />
    <input type="text" id="myText2"  />

    This works, but if you are changing it on the same input as a person is typing, it throws an error due to the non-numeric characters. You would need to remove those items first or change the event to something like onblur.

    function formatValue(){
       var x = Number(document.getElementById('myText').value);
       document.getElementById('myText').value = x.toLocaleString();
    <input type="text" id="myText" onblur="formatValue()" />

    Either way, in the start of the function there definitely should be a sanitizing component to strip non-numeric characters.

  • Wonderful! It works. Thanks a lot.