键入时在输入字段中为数字添加逗号

时间:2021-02-05 03:35:22

This does it incorrectly: Can jQuery add commas while user typing numbers?

这样做不正确:jQuery可以在用户输入数字时添加逗号吗?

  $('input.number').keypress(function(event){
      if(event.which >= 37 && event.which <= 40){
          event.preventDefault();
      }
      var $this = $(this);
      var num = $this.val().replace(/,/g, '');
      $this.val(num.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"));
  });

I need "1000000" to be "1,000,000" or better with spaces "1 000 000".

我需要“1000000”为“1,000,000”或更好,空间为“1 000 000”。

Please help. Thanks.

请帮忙。谢谢。

4 个解决方案

#1


11  

if you wanted to have something like "1 000 000", you can change the code to something like this.

如果你想拥有类似“1 000 000”的东西,你可以将代码改为这样的东西。

  var num = $this.val().replace(/(\s)/g, '');
  $this.val(num.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 "));

Hope this helps

希望这可以帮助

#2


6  

You can use Digital Bush's Masked Input Plugin for Jquery. It has many options for customisation including spaces, eg:

你可以使用Digital Bush的Masked Input Plugin for Jquery。它有许多自定义选项,包括空格,例如:

$("#myInputText").mask("9 999 999",{placeholder:" "})

It seems to have been tested on different browser platforms so it could save you from some compatibility testing.

它似乎已经在不同的浏览器平台上进行了测试,因此它可以帮助您避免一些兼容性测试。

If you want a more comprehensive numeric mask support, you can use the excellent autoNumeric from decorplanit.com . Their webpage is full of examples.

如果您想要更全面的数字掩码支持,可以使用decorplanit.com提供的优秀autoNumeric。他们的网页上有很多例子。

#3


6  

$(document).ready(function(){


    $('input.number').keyup(function(event){
      // skip for arrow keys
      if(event.which >= 37 && event.which <= 40){
          event.preventDefault();
      }
      var $this = $(this);
      var num = $this.val().replace(/,/gi, "").split("").reverse().join("");

      var num2 = RemoveRougeChar(num.replace(/(.{3})/g,"$1,").split("").reverse().join(""));

      // the following line has been simplified. Revision history contains original.
      $this.val(num2);});});

    function RemoveRougeChar(convertString){


    if(convertString.substring(0,1) == ","){

        return convertString.substring(1, convertString.length)            

    }
    return convertString;

}

Edit as you see fit - also in jsfiddle - jsFiddle

根据需要编辑 - 也在jsfiddle - jsFiddle中

#4


-1  

I tried to improve on j0k's code by instead using blur and focus events rather than keyup: http://jsfiddle.net/AqDda/

我尝试通过使用模糊和焦点事件而不是键盘来改进j0k的代码:http://jsfiddle.net/AqDda/

^ Try input A (standard type="number") versus input B (type="text" with JavaScript and some 'invalid' styling).

^尝试输入A(标准类型=“数字”)与输入B(使用JavaScript的类型=“文本”和一些“无效”样式)。

$('input.number').on("focus",function(e){
    var $this = $(this);
    var num = $this.val().replace(/,/g,"");
    $this.val(num);

}).on("blur", function(e){
    var $this = $(this);
    var num = $this.val().replace(/[^0-9]+/g, '').replace(/,/gi, "").split("").reverse().join("");     
    var num2 = RemoveRougeChar(num.replace(/(.{3})/g,"$1,").split("").reverse().join(""));
    $this.val(num2);
});

#1


11  

if you wanted to have something like "1 000 000", you can change the code to something like this.

如果你想拥有类似“1 000 000”的东西,你可以将代码改为这样的东西。

  var num = $this.val().replace(/(\s)/g, '');
  $this.val(num.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 "));

Hope this helps

希望这可以帮助

#2


6  

You can use Digital Bush's Masked Input Plugin for Jquery. It has many options for customisation including spaces, eg:

你可以使用Digital Bush的Masked Input Plugin for Jquery。它有许多自定义选项,包括空格,例如:

$("#myInputText").mask("9 999 999",{placeholder:" "})

It seems to have been tested on different browser platforms so it could save you from some compatibility testing.

它似乎已经在不同的浏览器平台上进行了测试,因此它可以帮助您避免一些兼容性测试。

If you want a more comprehensive numeric mask support, you can use the excellent autoNumeric from decorplanit.com . Their webpage is full of examples.

如果您想要更全面的数字掩码支持,可以使用decorplanit.com提供的优秀autoNumeric。他们的网页上有很多例子。

#3


6  

$(document).ready(function(){


    $('input.number').keyup(function(event){
      // skip for arrow keys
      if(event.which >= 37 && event.which <= 40){
          event.preventDefault();
      }
      var $this = $(this);
      var num = $this.val().replace(/,/gi, "").split("").reverse().join("");

      var num2 = RemoveRougeChar(num.replace(/(.{3})/g,"$1,").split("").reverse().join(""));

      // the following line has been simplified. Revision history contains original.
      $this.val(num2);});});

    function RemoveRougeChar(convertString){


    if(convertString.substring(0,1) == ","){

        return convertString.substring(1, convertString.length)            

    }
    return convertString;

}

Edit as you see fit - also in jsfiddle - jsFiddle

根据需要编辑 - 也在jsfiddle - jsFiddle中

#4


-1  

I tried to improve on j0k's code by instead using blur and focus events rather than keyup: http://jsfiddle.net/AqDda/

我尝试通过使用模糊和焦点事件而不是键盘来改进j0k的代码:http://jsfiddle.net/AqDda/

^ Try input A (standard type="number") versus input B (type="text" with JavaScript and some 'invalid' styling).

^尝试输入A(标准类型=“数字”)与输入B(使用JavaScript的类型=“文本”和一些“无效”样式)。

$('input.number').on("focus",function(e){
    var $this = $(this);
    var num = $this.val().replace(/,/g,"");
    $this.val(num);

}).on("blur", function(e){
    var $this = $(this);
    var num = $this.val().replace(/[^0-9]+/g, '').replace(/,/gi, "").split("").reverse().join("");     
    var num2 = RemoveRougeChar(num.replace(/(.{3})/g,"$1,").split("").reverse().join(""));
    $this.val(num2);
});