Javascript：确保输入仅为数字

Question

我有一个单位转换脚本；我的 HTML 包含单选按钮（用于选择单位）、一个输入字段、一个输出字段和一个按钮。

这是我的 Javascript 文件的示例：

[...]

window.addEventListener("load", function(){
    document.getElementById("convert").addEventListener("click", function(){
        var initial = document.getElementById("initial").value;
        document.getElementById("answer").innerHTML = convertObj.converted(initial);    
    });

[...]

});

function ConvertClass(){}

ConvertClass.prototype.converted = function(initialAmount){
    if(document.getElementById("kilograms").checked) {
        this.calculation = this.multiply(initialAmount, 2.2046);
    } else if(document.getElementById("pounds").checked) {
        this.calculation = this.divide(initialAmount, 2.2046);
    }
    return this.calculation.toFixed(2);
}

[...]

var convertObj = new ConvertClass();

我想添加一些内容，以确保 a) 空输入字段不被视为“0”，并且 b) 数字以外的内容不显示“NaN”作为答案。 在这两种情况下，我都希望我的输出不返回任何内容（空白）。我不希望它做任何事情，以防用户在提交正确的数字后提交空白字段或无效值（我认为这会导致仍显示先前的答案。）

我该怎么写？我假设我应该使用条件，但我不知道哪些条件。我做了一些研究，显然使用 isNaN() 并不完全准确，至少在这种情况下不是。

代码应该放在哪里，页面加载触发的函数还是按钮触发的函数？

我仍在学习，如果可能的话，我非常感谢您的解释以及编辑后的代码。谢谢！

Answer 1

在函数开头的ConvertClass.prototype.converted里面，添加：

// this coerces it to a number instead of a string
// or NaN if it can't convert to a number
initialAmount = initialAmount.length > 0 ? +initialAmount : 0/0;

// if not a number, return empty string
if (isNaN(initialAmount)) {
    return "";
}

如果输入为空字符串，0/0 的计算结果为 NaN。

Answer 2

添加以下函数来检查是否为整数。

function isInt(value) {
  return !isNaN(value) && 
         parseInt(Number(value)) == value && 
         !isNaN(parseInt(value, 10));
}

像这样改变你的加载函数：

window.addEventListener("load", function(){
    document.getElementById("convert").addEventListener("click", function(){
        var initial = document.getElementById("initial").value;
        if(isInt(initial)){
            document.getElementById("answer").innerHTML = convertObj.converted(initial); 
        }else{
            document.getElementById("answer").innerHTML = '';
        }   
    });

这将确保当提供有效整数时，只有它会转换，否则答案保持为空。

如需进一步了解如何检查整数，请查看：

How to check if a variable is an integer in JavaScript?

编辑：当数字不是整数时，将答案设置为空字符串。