2011年10月11日 星期二

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,然後再去做調整千分位的處理,

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

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

 

以上

5 則留言:

  1. 感謝分享
    您提到第一點【不可以輸入非數字的符號,,當輸入非數字時要讓輸入欄位的值變成0】,但實際輸入時 , 卻可以打上123abc,
    我想,這是否應該控制它?讓使用者不可以打上任何非數字字元,
    而非等到submit時再歸零。

    回覆刪除
    回覆
    1. 這邊的處理是,不限制使用者輸入非數字的符號,
      但是當 focus 離開 Textbox 後就會檢查輸入的資料,如果是非數字則讓輸入的內容變成零。
      至於應該要怎麼修改為你所要的功能需求,這部分你應該可以完成修改,
      當初使用者的需求並不想限制一輸入非數字就強制轉為零,
      或許第一點應該要改成以下的描述才是正確的:
      【不可以輸入非數字的符號,,當輸入非數字且離開欄位後要讓輸入的值變成0】

      刪除
    2. 感謝您的回覆及指導,
      我是初學web開發,
      因此,常會將以往winform上的開發經驗拿來相提並論,
      我也是開發會計類系統,因此對於輸入上的控制十分嚴謹,
      多所打擾,再致謝忱。

      刪除
    3. 指導是不敢當,在網路上大家都是互相討論,然後取得一個比較適合的解決方法,
      這篇文章的需求也是因為一個預算系統專案的功能需求,
      每個專案的功能都會因為使用者的需求不同而有所差別,這也就讓我們開發者傷透腦筋了。

      刪除

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。