2015-01-22 3 views
-2

У меня есть поле ввода для ввода пользователем числа. Этот номер будет отображаться в теге span при вводе пользователем. И я хотел бы отформатировать это число в теге span с помощью разделителя тысяч.Отображаемое число с тысячами разделителей

В настоящее время, показывают только то, что печатает без разделителя: JSFiddle

Вот мой упрощенный код:

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function charPreview(){ 
var x = document.getElementById("frm_price").value; 
document.getElementById("frm_price_preview").innerHTML = x; 
} 
</script> 
</head> 
<body> 
<form> 
Price: <input type='text' id='frm_price' 
onkeyup="charPreview()"> 
<span id="frm_price_preview"></span> 
</form> 
</body> 
</html> 
+0

Возможный дубликат [Как напечатать число с запятыми как разделители тысяч в JavaScript] (http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands -сепараторы-в-javascript) – ASGM

+0

@ASGM, вопрос, на который вы ссылаетесь, относится к целым числам, тогда как этот вопрос, как представляется, относится к номерам в целом. – Richard

ответ

0

Ответ без петель.

function charPreview(){ 
 
    var x = document.getElementById("frm_price").value; 
 
    document.getElementById("frm_price_preview").innerHTML = numberWithCommas(x); 
 
} 
 

 

 
function numberWithCommas(n) { 
 
    var parts=n.toString().split("."); 
 
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : ""); 
 
}
<form> 
 
Price: <input type='text' id='frm_price' onkeyup="charPreview()">&nbsp&nbsp&nbsp <span id="frm_price_preview">This is where to show number as user is typing</span> 
 
</form>

Смотрите также accounting.js который обрабатывает такие вещи довольно хорошо.

3

function charPreview(){ 
 
    var x = document.getElementById("frm_price").value; 
 
    document.getElementById("frm_price_preview").innerHTML = decimalWithCommas(x); 
 
} 
 

 

 
function numberWithCommas(x) { 
 
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
} 
 

 
function decimalWithCommas(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; 
 
    }); 
 
}
<form> 
 
Price: <input type='text' id='frm_price' onkeyup="charPreview()">&nbsp&nbsp&nbsp <span id="frm_price_preview">This is where to show number as user is typing</span> 
 
</form>

+0

Это один адрежист ... – taylorc93

+1

34,657,645.434,534 - не работает после точки –

+0

@ Рубен Казумов добавил исправление для десятичных знаков – juvian

Смежные вопросы