dames dames - 1 year ago 66
HTML Question

How do I add Thousands separator to my html form

For example i have a textbox, I am entering 12000 and i want it to look like 12,000 in the textbox How would I do this? Im using html to do the textbox

Answer Source

This is probably a bad idea...

<!doctype html>
<html lang="en">
<meta charset= "utf-8">
<title>Comma Thousands Input</title>
label, input, button{font-size:1.25em}
// insert commas as thousands separators 
function addCommas(n){
    var rx=  /(\d+)(\d{3})/;
    return String(n).replace(/^\d+/, function(w){
            w= w.replace(rx, '$1,$2');
        return w;
// return integers and decimal numbers from input
// optionally truncates decimals- does not 'round' input
function validDigits(n, dec){
    n= n.replace(/[^\d\.]+/g, '');
    var ax1= n.indexOf('.'), ax2= -1;
    if(ax1!= -1){
        ax2= n.indexOf('.', ax1);
        if(ax2> ax1) n= n.substring(0, ax2);
        if(typeof dec=== 'number') n= n.substring(0, ax1+dec);
    return n;
window.onload= function(){
    var n1= document.getElementById('number1'),
    n2= document.getElementById('number2');

    n1.onkeyup= n1.onchange=n2.onkeyup=n2.onchange= function(e){
        e=e|| window.event; 
        var who=e.target || e.srcElement,temp;
        if(who.id==='number2')  temp= validDigits(who.value,2); 
        else temp= validDigits(who.value);
        who.value= addCommas(temp);
    n1.onblur= n2.onblur= function(){
        var temp=parseFloat(validDigits(n1.value)),
<h1>Input Thousands Commas</h1>
<label> Any number <input id="number1" value=""></label>
<label>2 decimal places <input id="number2" value=""></label>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download