javascript - toFixed() 文本字段中的简单使用/说明

Question

我避免在这里问这个问题，因为我知道很多人过去都这样做过。在过去的几天里，我花了一些时间试图找到解决方案/弄清楚 toFixed() 方法是如何工作的。我已经在这个网站上阅读了很多问题以及其他网站上的教程，但我仍然不明白。

我有几个带有“.entry”类的文本字段。这里应该有美元金额。当人们输入以下内容(示例)时:

1.2
5
6.35
8.

我需要将它们更改为:

1.20
5.00
6.35
8.00

换句话说，添加尾随零。我知道这是通过 toFixed() 方法完成的，但我完全不知所措。我无法让它工作。

我发现一个脚本可以汇总页面上其他地方的 DIV 中的所有文本字段，并且我注意到它使用了 toFixed() 方法:

$("#total").html(sum.toFixed(2).replace(/(^\d{1,3}|\d{3})(?=(?:\d{3})+(?:$|\.))/g, '$1,'));
}

我尝试在这里使用相同的代码，以便零可以显示在文本字段中:

$('.entry').keyup(function(){
   var str = this.value.replace(/(^\d{1,3}|\d{3})(?=(?:\d{3})+(?:$|\.))/g, '$1');
   if (str!=this.value) this.value = str; 
});

这不起作用。

我是 Jquery 和 Javascript 的新手，所以我意识到我可能遗漏了一些明显的东西。我读过的大多数教程都是在代码中设置变量，然后使用“document.write”来显示具有正确数量的零的变量:

示例:

document.write( 1.1.toFixed(2) + '<br>' );

但这不是我要找的。我需要它显示在文本字段中。

提前致谢!

Answer 1

一些事情:

1. 使用 change 事件而不是 keyup。如果您使用 keyup，每次用户尝试输入内容时文本都会发生变化，这是一种烦人的用户体验。
2. 考虑使用 number 类型的input，步长为 0.1。

考虑到这些，我会做这样的事情:

$('.entry').change(function(){
   // parse the typed value as a floating point number
   var num = parseFloat(this.value);

   // ensure there are two decimal places
   this.value = num.toFixed(2);
});

请注意，如果用户键入的内容超过两位小数，则该值将四舍五入。

示例: http://jsfiddle.net/jndt1e02/