Javascript 在输入时格式化数字

Javascript 在输入时格式化数字,javascript,html,Javascript,Html,我一直在四处寻找,似乎找不到一个方法来做到这一点。当用户在输入字段中输入数字时,例如: <input type="text" class="numberOnly" id="miles" value="" /> 这很好,就像我说的,我不知道如何将用户输入的值放入其中,并在用户键入时将输出返回到输入字段中 注意:我需要格式化超过1个输入字段 更新: 我的代码中有这个,每次按下键盘都会触发,这样就可以使用了。这用于整个表单,因此每次按下按钮时表单都会更新 $(".numberOnly"

我一直在四处寻找,似乎找不到一个方法来做到这一点。当用户在输入字段中输入数字时,例如:

<input type="text" class="numberOnly" id="miles" value="" />
这很好,就像我说的,我不知道如何将用户输入的值放入其中,并在用户键入时将输出返回到输入字段中

注意:我需要格式化超过1个输入字段

更新:

我的代码中有这个,每次按下键盘都会触发,这样就可以使用了。这用于整个表单,因此每次按下按钮时表单都会更新

 $(".numberOnly").keypress(function (e) {
            //if the letter is not digit then display error and don't type anything
            if (e.which != 8 && e.which != 46 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                //display error message
                $("#errmsg").html("Digits Only").show().fadeOut(1600);
                return false;
            } else {
                $('input').keyup(function () {



                });
            }
        });
$(“.numberOnly”).按键(功能(e){
//如果字母不是数字,则显示错误,不键入任何内容
如果(e.which!=8&&e.which!=46&&e.which!=0&&e.which<48|e.which>57)){
//显示错误消息
$(“#errmsg”).html(“仅限数字”).show().fadeOut(1600);
返回false;
}否则{
$('input').keyup(函数(){
});
}
});
更新2:

是否可以为其制作一种覆盖图,例如:输入值为1000,但覆盖图将其显示为1000

任何帮助都是很好的。
非常感谢

尝试onkeypress事件。检查这个

<input type="text" class="numberOnly" id="miles" value="" onkeypress="format_num(id)" />
<SCRIPT LANGUAGE="JavaScript">
<!--
function format_num(id) {
var number = document.getElementById(id).value;
        number += '';
        number = number.replace(",","");
        x = number.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        document.getElementById(id).value = x1 + x2;
    }
//-->
</SCRIPT>

尝试onkeypress事件。检查这个

<input type="text" class="numberOnly" id="miles" value="" onkeypress="format_num(id)" />
<SCRIPT LANGUAGE="JavaScript">
<!--
function format_num(id) {
var number = document.getElementById(id).value;
        number += '';
        number = number.replace(",","");
        x = number.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        document.getElementById(id).value = x1 + x2;
    }
//-->
</SCRIPT>

问得好。在过去,我不得不处理一个类似的问题(在我的例子中,浮点数有两个小数点,所以我必须跟踪小数点)。当时找不到任何合适的现成解决方案。我最后做的和你的方法很相似。但是,您可以动态编辑输入值,而不是显示错误消息:检测不需要的字符并将其从字符串中删除

$myInput.val(filterUnwantedCharacters($myInput.val()))
这里的一个问题是,一旦执行此操作,某些浏览器会将插入符号位置重置为零,因此您可能希望跟踪插入符号位置,并在设置输入值后进行设置。您可能会发现这很有用:

此外,您可能希望在
keydown
上格式化输入,而不是
keypress
,这样用户会觉得更自然


这不是最简单的任务,但只要有一点耐心,您就可以构建一个相当不错的格式化程序。祝你好运

好问题。在过去,我不得不处理一个类似的问题(在我的例子中,浮点数有两个小数点,所以我必须跟踪小数点)。当时找不到任何合适的现成解决方案。我最后做的和你的方法很相似。但是,您可以动态编辑输入值,而不是显示错误消息:检测不需要的字符并将其从字符串中删除

$myInput.val(filterUnwantedCharacters($myInput.val()))
这里的一个问题是,一旦执行此操作,某些浏览器会将插入符号位置重置为零,因此您可能希望跟踪插入符号位置,并在设置输入值后进行设置。您可能会发现这很有用:

此外,您可能希望在
keydown
上格式化输入,而不是
keypress
,这样用户会觉得更自然


这不是最简单的任务,但只要有一点耐心,您就可以构建一个相当不错的格式化程序。祝你好运

你为什么要这么做?这会让用户非常困惑。接受不同的输入格式会更有用。确保你解决了正确的问题(并且解决了一个问题,而不是创造一个问题)。我制作的表格上的数字很大,表格也很简单。在这种情况下,这将使用户更容易看到他们键入的数字。可能的重复为什么要这样做?这会让用户非常困惑。接受不同的输入格式会更有用。确保你解决了正确的问题(并且解决了一个问题,而不是创造一个问题)。我制作的表格上的数字很大,表格也很简单。在这种情况下,它会让用户更容易看到他们键入的格式化数字。这种方式可以工作,但输出的数字是这样的。例如:100000等于100000。这也是我应该看到的问题。由于这会改变输入值,我的其他计算将无法工作,因为数字采用了新的格式。我可以删除逗号等,出于某种原因,我很难想到这一点。lol。所以这只是另一个问题。对不起,我没有遇到另一个问题?是不是你需要原始函数而不需要修改?另一个问题是数字是这样出来的。例如:100000等于100000。我想这是因为每次输入一个数字时,它都试图重新格式化?不确定,但数字有点奇怪。我已经做了修改。你试过了吗?这种方法很有效,但它输出的数字是这样的。例如:100000等于100000。这也是我应该看到的问题。由于这会改变输入值,我的其他计算将无法工作,因为数字采用了新的格式。我可以删除逗号等,出于某种原因,我很难想到这一点。lol。所以这只是另一个问题。对不起,我没有遇到另一个问题?是不是你需要原始函数而不需要修改?另一个问题是数字是这样出来的。例如:100000等于100000。我想这是因为每次输入一个数字时,它都试图重新格式化?不确定,但数字有点奇怪。我已经做了修改。你试过了吗?不是我想要的,但是谢谢你的回答。不是我想要的,但是谢谢你的回答。