toFixed（）在文本字段中简单使用/解释

Question

I've avoided asking this question here as I know many have in the past. I've spent some time during the last few days trying to find a solution/figure out how the toFixed() method works. I've read a lot of questions on this site and tutorials on others but I'm still not getting it.

I have several text fields with the class, ".entry". A dollar amount is supposed to go here. When people type the following (examples):

1.2
5
6.35
8.

I need them to change to:

1.20
5.00
6.35
8.00

In other words, add the trailing zeros. I know this is accomplished through the toFixed() method but I'm completely at a loss. I can't get it to work.

I have a script I found that totals all the text fields in a DIV elsewhere on the page and I notice that it uses the toFixed() method:

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

I tried using that same code here so the zeros could display in the text field:

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

It doesn't work.

I'm new to Jquery and Javascript so I realize I'm probably missing something obvious. Most of the tutorials I've read set the variable in the code and then use "document.write" to display the variable with the correct number of zeros:

Example:

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

But this isn't what I'm looking for. I need it to show up in the text field.

Thanks in advance!

Answer 1

A few things:

1. Use the change event instead of keyup . If you use keyup , the text wil change every time the user tries to type something, which is an annoying user experience.
2. Consider using an input of type number with a step of 0.1 .

With those in mind, I'd do something like this:

$('.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);
});

Note that if the user types something with more than two decimal places, the value will be rounded.

Example: http://jsfiddle.net/jndt1e02/