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