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

【问题标题】：Add commas for a number in input field while typing键入时在输入字段中为数字添加逗号
【发布时间】：2012-02-27 16:59:57
【问题描述】：

这是错误的： Can jQuery add commas while user typing numbers?

  $('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,"));
  });

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

请帮忙。谢谢。

【问题讨论】：

标签： jquery

【解决方案1】：

如果您想要“1 000 000”之类的内容，可以将代码更改为类似内容。

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

希望对你有帮助

【讨论】：

更改空间 - 不是问题。脚本没有正确定位逗号。
正确放置逗号是什么意思？举个例子
XepterX - 只需运行您的代码并输入 1000000。您应该会看到它没有提供 1 000 000！
看看这个小提琴，你可能想在你说我的代码不起作用之前尝试一下，jsfiddle.net/UMEZe
您在 jsfiddle 上的代码与您在此处发布的代码不同。骗子！！ =)) 你已经用 keyup 替换了 keypress 并且事情开始起作用了！谢谢。

【解决方案2】：

$(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;

}

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

【讨论】：

感谢 jsFiddle。当您尝试在数字的前面或中间输入数字时，此解决方案确实有效，但可用性较差。每次按键后，您的光标焦点始终位于数字的末尾。
我认为这也是这里的最佳答案，但它在标准用户行为方面存在问题，例如输入：$100000 - 它将 $ 视为整数。如果不是因为这个问题，我会投票赞成，但会反对所有其他答案，因为这个答案几乎是完美的，但需要注意的是它无法正确处理非数字。

【解决方案3】：

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

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

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

如果您想要更全面的数字掩码支持，您可以使用出色的 autoNumeric from decorplanit.com 。他们的网页充满了例子。

【讨论】：

我喜欢它，但是当我输入 99 999 999 时，一切都错了。 =) 我想我需要每三位添加逗号，但从右到左
你可以尝试$("#myInputText").mask("99,999,999",{placeholder:" "}).css("textAlign","right")右对齐。 css text-align 属性只是将文本向右对齐。
来吧。你是在开玩笑吧？我不需要将文本向右对齐。 =)))) 运行你的代码并输入 1000000 你不会得到 1,000,000。
对不起，我把你的问题误认为是固定长度的掩码（例如，电话号码）。我使用了插件 autoNumeric，它在数字字段中取得了相当大的成功。我已经编辑了答案以添加它。

【解决方案4】：

我按照@Zero-Distraction 的回答建议尝试了autoNumeric，但我在剪切/粘贴时遇到了一些问题。 CleaveJS 库更受欢迎，内置功能更多，我没有遇到同样的问题。（演示网站https://nosir.github.io/cleave.js/）

【讨论】：

【解决方案5】：

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

^ 尝试输入 A（标准 type="number"）与输入 B（type="text" 使用 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);
});

【讨论】：