javascript - isNaN 允许小数

Question

我有一个脚本，我可以在一个文本框中输入一个数字，它将计算其他文本框中的等效值。

$("input[type=text]").keyup(function () {

        var number = parseFloat($(this).val());
        var inc = parseFloat($(this).attr("inc"));
        var newValue = number / inc;
        $("input[type=text]").each(function () {
              if(isNaN(newValue * parseFloat($(this).attr("inc"))))
                   $(this).val(0);
              else
                   $(this).val(newValue * parseFloat($(this).attr("inc")));
         });
});

可以检查:JSFiddle Here

目前它不允许使用十进制数字。但我真的需要它。而且我不知道如何允许小数。

此外，我需要该框的小数点后 2 位数字的限制。

Answer 1

TL;DR: 如果您只想修复，请跳到实际代码。以下段落解释了为什么会发生这种情况。

十进制数字不起作用的原因是每次文本框被单个字符编辑时，所有文本框中的所有数字都会转换为 float 。如果您在其中一个框中输入 1，该值将传递给 parseFloat 并转换为 1(相同的值)。如果您随后按 3 字符，文本框会显示 13，该值会传递给 parseFloat 并返回相同的值 13 .

但是，如果您开始输入 13.，它将传递给 parseFloat； JavaScript 意识到句点是不必要的*，并将值13 放入文本框中。无论您输入的速度有多快，JavaScript 都会一直想要 trim 掉“不必要的”句点，然后您才能在末尾添加额外的数字。

您可以通过仅在您当前未输入的文本字段上运行parseFloat函数(或以任何方式更改值)来解决此问题。我已经强调了“奇迹发生”的两行:

$("input[type=text]").keyup(function () {
    var number = parseFloat($(this).val());
    var inc = parseFloat($(this).attr("inc"));
    var newValue = number / inc;
    var current = this;   // <---- "current" is the text field that is currently being edited
    $("input[type=text]").each(function () {
        if(this != current) {    // <--------------
            if (isNaN(newValue * parseFloat($(this).attr("inc"))))
                $(this).val(0);
            else
                $(this).val(newValue * parseFloat($(this).attr("inc")));
        }
    });
});

还有代码的 JS Fiddle，以便您可以测试它:http://jsfiddle.net/RX2sL/27/

* 技术上由于 String -> Float -> String 转换，句点被 trim 掉，但更容易想到期间被认为是“不必要的”。