纯JavaScript解号输入会显示2位小数

Question

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

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

<input placeholder="[=11=].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”或 "any" 无法实现此目的。

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

我哪里错了？

Answer 1

您需要调用onchange中的函数。目前，您只是在引用它。

改变这个：

onchange="setDecimal"

… 对此：

onchange="setDecimal(this)"

this 将输入传递给函数。

然后将您的函数更改为：

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

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

<input placeholder="[=14=].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">

Answer 2

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

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

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

<input placeholder="[=10=].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 也是正确的。我在没有注意到的情况下修复了函数括号问题。您将需要确保您有括号和确保可以在函数范围内引用该元素。

纯JavaScript解号输入会显示2位小数

Pure JavaScript solution number input will display 2 decimal places

html

javascript

decimal

cross-browser