如何添加千位分隔符到我的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表格

回答

相關問題