Skip to content

HTML input number format comma | Example code

  • by

The toLocaleString method lets us format a number to a string with commas as thousands of separators automatically. You can do HTML input number format comma with it.

const str = (1234567890).toLocaleString()
console.log(str)

Or using the autoNumeric plugin you can make a field as numeric input with different separators.

HTML input number format comma

A simple example code creates a mask input displaying the formatted number.

<!DOCTYPE html>
<html>
<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
  <input class="mask" type="number" value="12345.678"/>

  <script>
   $("input.mask").each((i,ele)=>{
    let clone=$(ele).clone(false)
    clone.attr("type","text")
    let ele1=$(ele)
    clone.val(Number(ele1.val()).toLocaleString("en"))
    $(ele).after(clone)
    $(ele).hide()
    clone.mouseenter(()=>{

      ele1.show()
      clone.hide()
    })
    setInterval(()=>{
      let newv=Number(ele1.val()).toLocaleString("en")
      if(clone.val()!=newv){
        clone.val(newv)
      }
    },10)

    $(ele).mouseleave(()=>{
      $(clone).show()
      $(ele1).hide()
    })
    

  })
</script>


</body>
</html>

Output:

HTML input number format comma

More: https://github.com/autoNumeric/autoNumeric

Do comment if you have any doubts or suggestions on this HTML number topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.