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 = [444849505152535455565796979899100101102103104105];   
  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. }  

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

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/ 可以看到

你可能感兴趣的:(jquery中实现只输入数字及货币分三位划分的效果)