jQuery 數字欄位的千分位處理

如果開發的專案式屬於會計系統之類的，常常會有個基本的功能要求，

那就是TextBox所輸入的金額數字必須要能夠轉換為千分位，

所謂千分位就是每三位數就要用「，」逗號分隔，我想這應該每個人都知道的基本常識，

於是在開發專案的時候就參考了幾個網路上的Script之後，就寫了幾個function用來處理千分的需求。

我知道目前網路上有許多的jQuery Plugin可以代為處理千分位的需求，

但是使用者的需求會比較難搞要求一些，User希望：

1. 不可以輸入非數字的符號，當輸入非數字時要讓輸入欄位的值變成0
2. 可以輸入正負值
3. 輸入的欄位需要限制輸入的字數，但是不能限制加入千分位後的長度
4. 當進入到當前的輸入欄位時不要出現千位號，但是離開輸入欄位後必須要出現千分位

說明一下第三點的要求，這很簡單，例如要限制一個輸入欄位的長度為11，最多只能輸入11位數，

但輸入11位數後，因為要加入千分位關係，所以11位數再加上三個三分位所以最後會變成14位數的長度，

加入千分位後的14位數必須要能夠存在於輸入欄位中，

輸入長度最多11位數的限制要存在，而輸入11位數字後依然要可以完整呈現加上千分位的14位數。

TextBox Max Length：11

Input：11111111111

output：11,111,111,111

 

大概就是上述的幾項要求，所以就寫出了以下的Script：

//數字處理為有千分位
function AppendComma(n)
{
    if (!/^((-*\d+)|(0))$/.test(n))
    {
        var newValue = /^((-*\d+)|(0))$/.exec(n);
        if (newValue != null)
        {
            if (parseInt(newValue, 10))
            {
                n = newValue;
            }
            else
            {
                n = '0';
            }
        }
        else
        {
            n = '0';
        }
    }
    if (parseInt(n, 10) == 0)
    {
        n = '0';
    }
    else
    {
        n = parseInt(n, 10).toString();
    }
    
    n += '';
    var arr = n.split('.');
    var re = /(\d{1,3})(?=(\d{3})+$)/g;
    return arr[0].replace(re, '$1,') + (arr.length == 2 ? '.' + arr[1] : '');
}
//將有千分位的數值轉為一般數字
function RemoveComma(n)
{
    return n.replace(/[,]+/g, '');
}
//調整千分位
function AdjustComma(item, length)
{
    var originalValue = $.trim($(item).val()).length > length 
        ? $.trim($(item).val()).substr(0, length) 
        : $.trim($(item).val());
    
    $(item).val(AppendComma(originalValue));
}
//動態調整輸入欄位的長度
function TextAreaLength(item, length) 
{
    if (item.value.length > length) 
    {
        item.value = item.value.substring(0, length);
    }
}        

備註：

客戶這邊並無輸入小數點的需求，所以輸入小數點也是在限制的條件之中，無法輸入小數點，

如果需要處理小數點的話，要改用parseFloat()，還會有精度問題需要處理，另外有可能需要處理四捨五入的問題。

 

而使用的方式如下所示：

$(document).ready(function()
{
    $(':input[type=textbox]').css("text-align", "right").attr("maxlength", "11");
    TextBoxNumberToAddComma();
});
function TextBoxNumberToAddComma()
{
    $(':input[type=textbox]').each(function(i, item)
    {
        $(item).focus(function()
        {
            //當獲得focus時，要把千分位給拿掉
            $(this).val(RemoveComma($(this).val()));
            $(this).select();
        })
        .blur(function()
        {
            //限制輸入長度
            TextAreaLength(this, 14);
    
            //加千分位
            AdjustComma(this, $(this).val(), 11);
        });
    });
}

我是在輸入欄位的foucs事件裡面去做拿掉千分位的處理，

而在blur事件中則是先動態調整輸入欄位的長度限制為14，然後再去做調整千分位的處理，

如此一來就可以達到使用者的要求了，來看看實際的應用。

當然，這只是我在開發時滿足客戶需求的程式碼，還有很大的修改空間，這部份就有待日後的需求如有更改再做更新了。

 

以上