jquery中实现只输入数字及货币分三位划分的效果

http://scottonwriting.net/sowblog/archive/2011/06/25/creating-a-currency-masked-textbox-with-on-the-fly-currency-formatting.aspx
  中,描述了使用jquery及插件,打早一个输入框,这个输入框中,只允许输入数字,可以使用
前后移动的光标,并且输入数字后,可以在数字前自动加上$符号,并且使用会计上的自动划分方法,对货币进行每三位的划分,下面讲解下过程:

1)编写js,判断只允许哪些输入,比如如下代码:
 

Java代码

1. // JavaScript I wrote to limit what types of input are allowed to be keyed into a textbox    
2. var allowedSpecialCharKeyCodes = [46,8,37,39,35,36,9];   
3. var numberKeyCodes = [44, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105];   
4. var commaKeyCode = [188];   
5. var decimalKeyCode = [190,110];   
6.   
7. function numbersOnly(event) {   
8.     var legalKeyCode =   
9.         (!event.shiftKey && !event.ctrlKey && !event.altKey)   
10.             &&   
11.         (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0  
12.             ||   
13.         jQuery.inArray(event.keyCode, numberKeyCodes) >= 0);   
14.   
15.     if (legalKeyCode === false)   
16.         event.preventDefault();   
17. }   
18.   
19. function numbersAndCommasOnly(event) {   
20.     var legalKeyCode =   
21.         (!event.shiftKey && !event.ctrlKey && !event.altKey)   
22.             &&   
23.         (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0  
24.             ||   
25.         jQuery.inArray(event.keyCode, numberKeyCodes) >= 0  
26.             ||   
27.         jQuery.inArray(event.keyCode, commaKeyCode) >= 0);   
28.   
29.     if (legalKeyCode === false)   
30.         event.preventDefault();   
31. }   
32.   
33. function decimalsOnly(event) {   
34.     var legalKeyCode =   
35.         (!event.shiftKey && !event.ctrlKey && !event.altKey)   
36.             &&   
37.         (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0  
38.             ||   
39.         jQuery.inArray(event.keyCode, numberKeyCodes) >= 0  
40.             ||   
41.         jQuery.inArray(event.keyCode, commaKeyCode) >= 0  
42.             ||   
43.         jQuery.inArray(event.keyCode, decimalKeyCode) >= 0);   
44.   
45.     if (legalKeyCode === false)   
46.         event.preventDefault();   
47. }   
48.   
49. function currenciesOnly(event) {   
50.     var legalKeyCode =   
51.         (!event.shiftKey && !event.ctrlKey && !event.altKey)   
52.             &&   
53.         (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0  
54.             ||   
55.         jQuery.inArray(event.keyCode, numberKeyCodes) >= 0  
56.             ||   
57.         jQuery.inArray(event.keyCode, commaKeyCode) >= 0  
58.             ||   
59.         jQuery.inArray(event.keyCode, decimalKeyCode) >= 0);   
60.   
61.     // Allow for $   
62.     if (!legalKeyCode && event.shiftKey && event.keyCode == 52)   
63.         legalKeyCode = true;   
64.   
65.     if (legalKeyCode === false)   
66.         event.preventDefault();   
67. }  

// JavaScript I wrote to limit what types of input are allowed to be keyed into a textbox 
var allowedSpecialCharKeyCodes = [46,8,37,39,35,36,9];
var numberKeyCodes = [44, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105];
var commaKeyCode = [188];
var decimalKeyCode = [190,110];

function numbersOnly(event) {
    var legalKeyCode =
        (!event.shiftKey && !event.ctrlKey && !event.altKey)
            &&
        (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, numberKeyCodes) >= 0);

    if (legalKeyCode === false)
        event.preventDefault();
}

function numbersAndCommasOnly(event) {
    var legalKeyCode =
        (!event.shiftKey && !event.ctrlKey && !event.altKey)
            &&
        (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, numberKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, commaKeyCode) >= 0);

    if (legalKeyCode === false)
        event.preventDefault();
}

function decimalsOnly(event) {
    var legalKeyCode =
        (!event.shiftKey && !event.ctrlKey && !event.altKey)
            &&
        (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, numberKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, commaKeyCode) >= 0
            ||
        jQuery.inArray(event.keyCode, decimalKeyCode) >= 0);

    if (legalKeyCode === false)
        event.preventDefault();
}

function currenciesOnly(event) {
    var legalKeyCode =
        (!event.shiftKey && !event.ctrlKey && !event.altKey)
            &&
        (jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, numberKeyCodes) >= 0
            ||
        jQuery.inArray(event.keyCode, commaKeyCode) >= 0
            ||
        jQuery.inArray(event.keyCode, decimalKeyCode) >= 0);

    // Allow for $
    if (!legalKeyCode && event.shiftKey && event.keyCode == 52)
        legalKeyCode = true;

    if (legalKeyCode === false)
        event.preventDefault();
}

  可以看到,上面的代码中,对只输入数字,能输入数字和逗号,能输入数字和其他符号(货币)的,作了限制了.

2 在文本框中应用如下jquery:
  $(document).ready(function () {
    $("input[type=text].currenciesOnly").live('keydown', currenciesOnly);
});
  这里currenciesOnly是个样式,这里调用了上面的方法currenciesOnly

3) 再调用一个老外写的货币分3位符号插件,地址在:
http://code.google.com/p/jquery-formatcurrency/
再修改下:
   $(document).ready(function () {
    $("input[type=text].currenciesOnly").live('keydown', currenciesOnly)
                        .live('blur',
                                 function () {
                                     $(this).formatCurrency();
                                 }
                              );
});
  最后一个运行效果在:
http://jsfiddle.net/CBDea/1/ 可以看到