自動填充文本框中的逗號和小數點

Question

我有一個美元數量的文本框（html下方）。我試圖添加一些CSS或jQuery自動填充逗號和小數時，用戶在文本框中輸入值。例如，如果用戶輸入123456789，它應該自動變爲12,345,667.89。

<html:text styleId="incomePerPeriod" styleClass="textbox" property="employment.incomePerPeriod" maxlength="10" /> 

我將下面的類添加到上面的html代碼，但它不起作用。任何人都可以請幫助我如何實現這一目標？

class="form-control text-right number" 

Answer 1

<input id="num" type="text" /> 

function addCommas(x) { 
    var parts = x.toString().split("."); 
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    return parts.join("."); 
} 

$('#num').keypress(function() { 
    var numberTyped = $("#num").val(); 
    var convertedNum = addCommas(numberTyped); 
    $("#num").val(convertedNum); 

}); 

該腳本使用正則表達式來添加逗號。傳遞一個像23456789.12345這樣的數字會產生23,456,789.12345，這是期望的結果。

第二個例子

http://jsfiddle.net/ezbao2a3/15/

Answer 2

下面是格式的數量onkeyup，爲了得到input的實際價值的解決方案。

keypress事件檢查有效密鑰（例如，只有數字和退格）。這可能會完善並移到js事件監聽器。

也可以調整格式化程序正則表達式來處理小數。

這是一段代碼。希望能幫助到你。

isNumberKey = function(evt) { 
 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
 
    if (charCode != 46 && charCode > 31 
 
     && (charCode < 48 || charCode > 57)) 
 
    return false; 
 

 
    return true; 
 
} 
 

 
var textInput = document.getElementById('txtChar'); 
 

 
textInput.addEventListener('keyup', function(evt){ 
 
    var n = parseInt(this.value.replace(/\D/g,''),10); 
 
    textInput.value = n.toLocaleString(); 
 
}, false);

<input id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar" />

Answer 3

這可能是也可能不是純JS字符串函數簡單，但這裏是一個正則表達式的版本。

事情是，我找不到方法將輸入的數字字符串分組到??n nnn ... nnn nnn nn與正則表達式匹配。不過，獲得像nn nnn nnn ... nnn n??這樣的組織相對簡單。這是正則表達式;

/(^\d{2})|(\d{1,3})(?=\d{1,3}|$)/g 

所以我反轉字符串開始如下;

Array.prototype.reduce.call(str,(p,c) => c + p) 

然後應用正則表達式來我的逆轉字符串.match(rex)將工作像，"123456789"產生[ '98', '765', '432', '1' ]。

那麼當然有.和,加入他們在適當的位置與

.reduce((p,c,i) => i - 1 ? p + "," + c : p + "." + c) 

，並得到98.765,432,1。那麼我們只需要再次反轉這個字符串。所以這裏是一個工作的例子。

function formatNumber(e){ 
 
    var rex = /(^\d{2})|(\d{1,3})(?=\d{1,3}|$)/g, 
 
     val = this.value.replace(/^0+|\.|,/g,""), 
 
     res; 
 
     
 
    if (val.length) { 
 
    res = Array.prototype.reduce.call(val, (p,c) => c + p)   // reverse the pure numbers string 
 
       .match(rex)           // get groups in array 
 
       .reduce((p,c,i) => i - 1 ? p + "," + c : p + "." + c); // insert (.) and (,) accordingly 
 
    res += /\.|,/.test(res) ? "" : ".0";        // test if res has (.) or (,) in it 
 
    this.value = Array.prototype.reduce.call(res, (p,c) => c + p); // reverse the string and display 
 
    } 
 
} 
 

 
var ni = document.getElementById("numin"); 
 

 
ni.addEventListener("keyup", formatNumber);

<input id="numin" placeholder="enter number">

的res += /\.|,/.test(res) ? "" : ".0";部分以一個前綴的"0."醫療服務時我們只有美分。

Answer 4

我試過這個解決方案，它的工作。在腳本標記中導入以下行。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script> 

然後在的onLoad函數，可以使用下面幾行：

$('#incomePerPeriod').mask("#,##0.00", {reverse: true});