如何添加千位分隔符到我的html表格

2

这可能是一个糟糕的主意......

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset= "utf-8"> 
<title>Comma Thousands Input</title> 
<style> 
label, input, button{font-size:1.25em} 
</style> 
<script> 
// insert commas as thousands separators 
function addCommas(n){ 
    var rx= /(\d+)(\d{3})/; 
    return String(n).replace(/^\d+/, function(w){ 
     while(rx.test(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){ 
     ++ax1; 
     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.value=n2.value=''; 

    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)), 
     temp2=parseFloat(validDigits(n2.value)); 
     if(temp)n1.value=addCommas(temp); 
     if(temp2)n2.value=addCommas(temp2.toFixed(2)); 
    } 
} 
</script> 
</head> 
<body> 
<h1>Input Thousands Commas</h1> 
<div> 
<p> 
<label> Any number <input id="number1" value=""></label> 
<label>2 decimal places <input id="number2" value=""></label> 
</p></div> 
</body> 
</html>

来源

2012-03-19 16:52:04 kennebec

+0

谢谢你，但你为什么说这可能是一个坏主意？ – dames 2012-03-19 18:57:09

+0

这是一个坏主意，因为它会改变提交给服务器的文本。 – David 2014-05-06 05:36:56

2

可以使用Javascript Mask API

来源

2012-03-19 16:13:54 redDevil

2

用户输入我会建议不要格式化值包含逗号。处理整数值（12000）会比处理一次字符串值（12,000）容易得多。

但是，如果您确定格式化该值，则按照@achusonline的建议，我会屏蔽该值。这里是一个jQuery插件，会得到这样的结果是有用的：

http://digitalbush.com/projects/masked-input-plugin/

来源

2012-03-19 16:14:01 Curt

+0

“更容易对付......” 真的吗？我的意思是剥离格式非常简单。处理多语言用户的格式非常困难。但是，如果您要在客户端中添加格式，则在提交时剥离它很简单。 – 2016-06-28 16:14:46

10

试着这么做this

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; 
}

然后用它在你的文本框，像这样

<input type="text" id="txtBox" onchange="return addCommas(this.value)" />

希望这有助于

来源

2012-03-19 16:18:10

+0

感谢数百万人！竖起大拇指@Mark Walters – dames 2012-03-19 16:33:28

+1

对于未来的读者，请记住，输入'type =“number”'失败，因为html5数字字段不能接受逗号 – 2016-01-08 14:09:03

+0

，因为@DarrenSweeney说'数字'不接受逗号。但'type =“tel”'会做一个诡计 – 2018-02-26 09:22:45

6

使用jQuery的autoNumeric plugin：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Input with separator</title> 
    <script type="text/javascript" src="jquery-1.11.0.js"></script> 
    <script type="text/javascript" src="autoNumeric.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myinput").autoNumeric(
     'init', {aSep: ',', mDec: '0', vMax: '99999999999999999999999999'} 
    ); 
    }); 
    </script> 
</head> 
<body> 
    <input id="myinput" name="myinput" type="text" /> 
</body> 
</html>

来源

2014-02-25 15:41:32 Csq

如何添加千位分隔符到我的html表格

回答

相关问题