Question

我正在尝试使用以下代码（在此处找到：Make an html number input always display 2 decimal places）强制数字输入在输入失去焦点/ onchange时显示两位小数：

function setDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

<input placeholder="$0.00" type="number" onchange="setDecimal" name="amount_20_20_amt" id="amount_20_20_amt" value="" autocomplete="off" min="0" max="50000000" step="0.01">

由于某些原因，这不起作用，虽然我能够使用以下内联解决方案并且它完美运行：

onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)"

我不能使用jQuery或任何其他库（业务规则），我需要它来显示输入何时失去焦点。将步骤调整为“.01”或“任何”不会实现此目的。

JS存储在一个正常加载的.js文件中，而.js文件中的其他所有内容都正常工作，所以我认为它必须是代码段中的错误，尽管我无法弄清楚是什么。

我哪里错了？

Answer 1

您需要在onchange中调用该函数。目前，您只是简单地引用它。

改变这个：

onchange="setDecimal"

......对此：

onchange="setDecimal(this)"

this将输入传递给函数。

然后将您的功能更改为：

function setDecimal(input) {
  input.value = parseFloat(input.value).toFixed(2);
}

＆＃13;

function setDecimal(input) {
  input.value = parseFloat(input.value).toFixed(2);
}

＆＃13;

<input placeholder="$0.00" type="number" onchange="setDecimal(this)" name="amount_20_20_amt" id="amount_20_20_amt" value="" autocomplete="off" min="0" max="50000000" step="0.01">

＆＃13;

Answer 2

无论何时调用函数，都会根据函数的调用方式设置this。如果您在对象上调用函数（例如myObject.doTheThing()），则当您处于该函数的范围内时，this将成为该对象。如果在没有对象的情况下调用this，则this将成为全局对象（window）。

您的第二个示例有效，因为您传递了this，因此可以将其引用为el。这样做可以达到同样的效果：

function setDecimal(input) {
    input.value = parseFloat(input.value).toFixed(2);
}

<input placeholder="$0.00" type="number"
    onchange="setDecimal(this)" name="amount_20_20_amt" id="amount_20_20_amt"
    value="" autocomplete="off" min="0" max="50000000" step="0.01">

您也可以考虑使用addEventListener来绑定事件。

document.querySelector('input').addEventListener('blur', function() {
  this.value = parseFloat(this.value).toFixed(2);
});

<input>

编辑：@RickHitchcock也是正确的。我修复了函数括号问题，甚至没有注意到。你需要确保你有parens 和确保该元素可以在函数范围内引用。

纯JavaScript解决方案编号输入将显示2个小数位

2 个答案: