键入时在数字中添加逗号

Posted 2023-02-24

【中文标题】键入时在数字中添加逗号

【英文标题】：Adding commas to numbers when typing

【发布时间】：2015-02-03 09:02:29

【问题描述】：

我尝试在用户输入数字时添加逗号。在 Jquery 中选择属性为 number 类型的 input form-control 类的正确语法是什么？

编辑：我无法更改 html 代码，因为它是使用 Bootstrap 从 Django 输出的。

HTML

<span class="input-group-addon">$</span>
<input class="form-control" id="id_step2-number_2"
       name="step2-number_2" type="number">
<span class="input-group-addon">.00</span>

JQuery

$(document).ready(function()
    $("input[type='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("")
        );
          
        console.log(num2);

        // 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 链接 https://jsfiddle.net/yWTLk/767/

【问题讨论】：

你为什么不用自动数字插件？

看起来很有趣，但我不知道让 JQuery 指向我发布的文本输入的正确语法。

$this.val() 比 this.value 效率高得多。

你可以使用这个小提琴作为基础：jsfiddle.net/GH05T/rd4xsvxd

【参考方案1】：

将type="number" 更改为type="text"，因为您不能将逗号放入数字中。

<input class="form-control" id="id_step2-number_2"
       name="step2-number_2" type="text">

检查更新Fiddle

【参考方案2】：

首先，您不能使用input type=number，因为它不允许您使用的字符, 来标注数字组。

第二，有一个好的正则表达式，这其实超级简单，而且真的不需要逆向和逆向，很无聊。

var num = $this.val().replace(/,/gi, "");
var num2 = num.split(/(?=(?:\d3)+$)/).join(",");

第一行从输入值中删除逗号。 第二行很神奇，它将值从最后一个到第一个分成 3 组，然后用逗号连接。例如，'1234567' 将变为 ['1', '234', '567']。

我这里使用split只是为了展示RegExp的强大，在实际中我们不需要拆分和加入，直接替换即可：

var num2 = num.replace(/\d(?=(?:\d3)+$)/g, '$&,');

fiddle

但是，真正的魔力在于，我敢打赌你会大喊，toLocaleString！什么？！

(1234567).toLocaleString() // "1,234,567"

【讨论】：

你会怎么处理小数点呢？如果你使用小数点来表示美分，它会破坏它。

@James 继续使用toLocaleString()

我确实先尝试过，但没有成功。也没有错误。我用的是最新版的FF。不过，我会在周一进行更多调查。谢谢。

@James 哎呀，我猜你的语言环境设置与我的不同？由于 JS 的 RE 实现不完整，而且我对 RE 的专业程度不高，我怀疑只用一个 RE 就可以实现。但就个人而言，如果事情变得复杂，我宁愿选择一些“愚蠢”的方法，至少更易于维护:)

但问题是光标总是走到最后。假设我想删除数字，我按 2 次退格键，第一次按后它就结束了 - 非常糟糕。

【参考方案3】：

使用输入类型“数字”似乎可以防止使用 javascript 在输入字段中插入逗号。如果您想插入逗号，您可能希望使用“文本”输入，但这会阻止在禁用 Javascript 的浏览器上进行数字验证。

乐趣永无止境，它是 HTML5。

【讨论】：

这应该作为评论而不是答案添加。