如何避免在 html 输入中出现"NaN"消息

Question

现在我已经实现了以下代码:

$(document).ready(function() {   
let maximumFractionDigits = 2;
var valueInput = $("#exampleInput");

const formatNumber = (value) => {
return parseFloat(value.replace(/,/g,'')).toLocaleString('en-US', { maximumFractionDigits });
}

valueInput.on('input', function() {
if (!this.value || (maximumFractionDigits && this.value.endsWith('.'))) {
return
}
$(this).val(formatNumber(this.value));
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="exampleInput" class="form-control" aria-label="Grant Amount" type="text" placeholder="0" name="price" required="">

它工作得很好，并做了我想要的:当用户输入超过3位数字时，添加千位逗号分隔符，并允许两个小数点(美元格式)。

但是，如果用户输入其他字符集的数字，例如日语键盘，或任何意外的字符，则出现以下消息:

"NaN">

预期结果:

如果用户输入了一个无效的字符，它不应该出现在输入中(我想避免NaN消息)，例如，如果我输入'a'，什么也不会出现在输入中。

我试过了:

不知何故，我试图使用isNaN函数，但我的方法绝对是错误的。

const formatNumber = (value) => {
if (isNaN(value)){
return 0;
} else{
return parseFloat(value.replace(/,/g,'')).toLocaleString('en-US', { maximumFractionDigits });
}
}

如果有人能帮助我，我将非常感激。

Answer 1

解决方案很简单，您必须检查input事件前的字符，即keypress事件。

valueInput.keypress(
/**
* Handle the keypress event on valueInput.
* 
* Used to filter in only the numbers. 
*/
function(e) {
var keyCode = e.which
if ((keyCode >= 32 && keyCode <= 43) 
|| keyCode == 45
|| keyCode == 47
|| (keyCode >= 58 && keyCode <= 126))
return false
}
);

keyCode是被按下的键的ASCII码:

• 从32到47这些都是符号。(44为,字符，46为.字符)
• 从58到126这些都是其他符号，字母和括号。

最后，通过在输入非数字字符时返回false，您基本上告诉jQuery拒绝它作为输入。因此，不触发input事件，问题就解决了。

Answer 2

首先，您需要删除除数字和点以外的所有字符，并删除多余的点。最后，删除parseFloat，因为parseFloat(")的值是NaN。

$(document).ready(function() {
let maximumFractionDigits = 2;
var valueInput = $("#exampleInput");
const formatNumber = (value) => {
const parsedValue = value.replace(/[^d.]/gi, '').replace(/(?<!^[d-]+)./g, '');
return parsedValue ? (+parsedValue).toLocaleString('en-US', {
maximumFractionDigits
}) : '';
}
valueInput.on('input', function() {
if (!this.value || (maximumFractionDigits && this.value.endsWith('.'))) {
return
}
$(this).val(formatNumber(this.value));
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="exampleInput" class="form-control" aria-label="Grant Amount" type="text" placeholder="0" name="price" required="">

Answer 3

我找到了一个可能的解决方案:

const formatNumber = (value) => {
var result = parseFloat(value.replace(/,/g,'')).toLocaleString('en-US', { maximumFractionDigits });
const withoutCommas = result.replace(/,/g, '');
if (isNaN(withoutCommas)){
return
}
return result;
}

基本上，如果在解析Float并删除'，' isNaN=True后，然后返回，如果它是一个数字，我可以按预期返回结果。可能不是最优雅的解决方案，但它有效。