设置输入时的数字格式

Format numbers on input

本文关键字：数字 格式 输入 设置      更新时间：2023-09-26

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

<input type="text" class="numberOnly" id="miles" value="" />

我怎样才能在他们键入类似内容时对其进行更新。 例如：

输入： 100000

产量： 100,000

我有一些类似的代码，可以在我计算它们时格式化其他一些东西，这是我用来格式化其他数字的函数。

function format_num(number) {
        number += '';
        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');
        }
        return x1 + x2;
    }

这工作正常，就像我说的，我不确定如何将用户的输入值放入其中并在他们键入时将输出返回输入字段。

注意：我需要格式化超过 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 () {

                });
            }
        });

更新 2：

是否可以为其制作一种叠加层，例如：输入的值为 1000，但叠加层将其显示为 1,000？

任何帮助都会是很棒的家伙。非常感谢！

尝试使用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()))

这里的一个问题是，一旦您执行此操作，某些浏览器会将插入符号位置重置为零，因此您可能希望跟踪插入符号位置并在设置输入值后进行设置。您可能会发现这很有用： http://www.examplet.org/jquery/caret.php

此外，您可能希望在keydown而不是keypress上格式化输入，这会让用户感觉更自然。

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

相关文章：