javascript - how to prevent toFixed from rounding off decimal numbers

Question

I'm very new to html, javascript, and css so please forgive if my question sounds idiotic to you. My question is how can I prevent the function toFixed() from rounding of the decimal number.

Here's my link: http://jsfiddle.net/RWBaA/4/

What I'm trying to do is I'm checking the input if its a valid decimal number whenever the user types in the textbox. At the same time I also want to check if the input is a valid currency which means it can only add two more numbers at the right of the decimal point. The problem is when the user enters the 3rd number after the decimal point the 2nd number after the decimal point is rounded off to the nearest hundredths if the the 3rd number is >= 5.

Test Input :

  Input         Output  
123456.781 -> 123456.78

123456.786 -> 123456.79

Why my code does not allow arrow keys in chrome?

Please help. If you have a better solution you are free to suggest. Thanks in advance.

Answer 1

Round the number (down) to the nearest cent first:

val = Math.floor(100 * val) / 100;

EDIT It's been pointed out that this fails for e.g. 1.13. I should have known better myself!

This fails because the internal floating point representation of 1.13 is very slightly less than 1.13 - multiplying that by 100 doesn't produce 113 but 112.99999999999998578915 and then rounding that down takes it to 1.12

Having re-read the question, it seems that you're really only trying to perform input validation (see below), in which case you should use normal form validation techniques and you shouldn't use .toFixed() at all. That function is for presenting numbers, not calculating with them.

$('#txtAmount').on('keypress', function (e) {
    var k = String.fromCharCode(e.charCode);
    var v = this.value;
    var dp = v.indexOf('.');

    // reject illegal chars
    if ((k < '0' || k > '9') && k !== '.') return false;

    // reject any input that takes the length
    // two or more beyond the decimal point
    if (dp >= 0 && v.length > dp + 2) {
        return false;
    }

    // don't accept >1 decimal point, or as first char
    if (k === '.' && (dp >= 0 || v.length === 0)) {
        return false;
    }
});

Answer 2

Additionally, to prevent toFixed() from rounding off decimal numbers and to make your number into two decimal places you can use this,

val = (Math.floor(100 * val) / 100).toFixed(2);

Answer 3

This may sound really dumb, but why not prevent rounding mathematically?

Basically what you are doing is displacing the value by half a precision point, in this way the rounding becomes floored.

Normal: 0 to 4 make a 0 5 to 9 make a 10

After you substract half a precision point: -4 (becomes 6) to -1 (becomes 9) make a 0 0 to 4 make a 0

You would need to substract 0.5/10^N In this case for 2 decimals 0.5/10^2 = 0.5/100 = 0.005 for 4 decimals you would need to substract 0.00005

But, because of the way that floating point works in computers and in the cpu you need to make sure you have enough precision to be used for this. So I would strongly suggest you remove the precision to a point that the cpu can't mess it up.

num = 123456.786
Math.trunc(num) + (num-Math.trunc(num)-0.005).toFixed(2)

num = 123456.781
Math.trunc(num) + (num-Math.trunc(num)-0.005).toFixed(2)

num = 123456.789
Math.trunc(num) + (num-Math.trunc(num)-0.005).toFixed(2)

Answer 4

That's even simpler:

function truncateToDecimals(num, dec = 2) {
  const calcDec = Math.pow(10, dec);
  return Math.trunc(num * calcDec) / calcDec;
}

So:

truncateToDecimals(123456.786) -> 123456.78

Answer 5

if you want to avoid rounding off... Ex. 1.669 => 1.67, 548.466 => 548.47

The function result looks like: 1.669 => 1.66, 548.466 => 548.46

Then the following JQuery function will help you. It is tested and working properly.

<input name="a" type="text" id="a" size="7%" tabindex="2">




  $('#a').keyup(function(e){
        if($(this).val().indexOf('.')!=-1){ 
            if($(this).val()=="." && $(this).val().length==1){
                this.value = parseFloat(0).toFixed(1);
            }else if($(this).val().split(".")[1].length > 2){                
                if( isNaN( parseFloat( this.value ) ) ) 
                    return;
                  this.value = $(this).val().split(".")[0]+"."+$(this).val().split(".")[1].substring(0,2);
            }   
        }
   });

Answer 6

This is tested and works for all cases.

function truncateTwoDecimals(num, dec = 2) {
  const totalDecimal = countDecimals(num);
  if (totalDecimal === 1) {
    dec = 1;
  }
  if (totalDecimal === 2) {
    return num;
  }
  const calcDec = Math.pow(10, dec);
  return Math.trunc(num * calcDec) / calcDec;
}
function countDecimals(value) {
  if(Math.floor(value) === value) return 0;
  return value.toString().split(".")[1].length || 0; 
}
const res = truncateTwoDecimals(1.13);
console.log(res);
console.log(truncateTwoDecimals(4492903605.9));

Answer 7

you can give this a try, it won't round your decimals

/**
 * @param {any} input 
 * @param {number} decimals 
 */
var toFixed = function(input, decimals) {
  var arr = ("" + input).split(".");
  if (arr.length === 1) return input;
  var int = arr[0],
      max = arr[1].length,
      dec = arr[1].substr(0, decimals > max ? max : decimals);
  return decimals === 0 ? int : [int, "." , dec].join("");
}