¿Cómo limitar a dos decimales un input?

Question

estoy intentando restringir la cantidad de decimales en un input "receptor" que muestra el resultado de una serie de operaciones matematicas que se dan segun los valores de otros dos input involucrados y por ende los decimales son muchos. Necesito restringirlo a unicamente dos.

Mi ejemplo:

function multi(){
  m1 = document.getElementById("uno").value;
  m2 = document.getElementById("dos").value;
  r1 = m1;
  r2 = m2*m2;
  rt = m1/r2;
  document.getElementById("resultado").value = rt;
}

<table width="300">
<tr>
<td width="100">Valor uno</td>
<td width="100">Valor dos</td>
<td width="100">Resultado dos decimales</td>
</tr>
<tr>
<td width="100"><input type="number" id="uno" name="uno" onKeyUp="multi();"></td>
<td width="100"><input type="number" id="dos" name="dos" onKeyUp="multi();"></td>
<td width="100"><input type="number" id="resultado" name="resultado"></td><!--recibe el resultado y necesito dos decimales-->
</tr>
</table>

Gracias de antemano herman@s por la ayuda!

Josue Arriola · Answer 1 · 2020-04-26T22:44:23.120

Al momento de asignar el valor al input "resultado" usa rt.toFixed(2)

function multi(){
  m1 = document.getElementById("uno").value;
  m2 = document.getElementById("dos").value;
  r1 = m1;
  r2 = m2*m2;
  rt = m1/r2;
  document.getElementById("resultado").value = rt.toFixed(2);
}

<table width="300">
<tr>
<td width="100">Valor uno</td>
<td width="100">Valor dos</td>
<td width="100">Resultado dos decimales</td>
</tr>
<tr>
<td width="100"><input type="number" id="uno" name="uno" onKeyUp="multi();"></td>
<td width="100"><input type="number" id="dos" name="dos" onKeyUp="multi();"></td>
<td width="100"><input type="number" id="resultado" name="resultado"></td><!--recibe el resultado y necesito dos decimales-->
</tr>
</table>

Si bien la respueta resuelve el problema, la calidad es muy baja. Seria mucho mejor que expliques que es lo que usaste y como su aplicación sirve para resolver el problema. — Marcos, Apr 26 '20 at 22:35

score 1 · Accepted Answer · answered Apr 26 '20 at 22:49

Puedes utilizar Math.round((rt + Number.EPSILON) * 100) / 100 con math round redondeas el numero multiplicado por 100 esto corre la coma tres espacios y le quita los decimales, luego todo el redondeado lo divides entre 100 que correrá la coma dos espacios hacia la dirección contraria, dando como resultado nuestro numero. Sumando la propiedad EPSILON de Number al numero antes de multiplicarlo, nos aseguramos de evitar errores como decimales de 3 cifras por aproximación.

ver Number.EPSILON

function multi(){
  m1 = document.getElementById("uno").value;
  m2 = document.getElementById("dos").value;
  r1 = m1;
  r2 = m2*m2;
  rt = m1/r2;
  rt = Math.round((rt + Number.EPSILON) * 100) / 100
  document.getElementById("resultado").value = rt;
}

<table width="300">
<tr>
<td width="100">Valor uno</td>
<td width="100">Valor dos</td>
<td width="100">Resultado dos decimales</td>
</tr>
<tr>
<td width="100"><input type="number" id="uno" name="uno" onKeyUp="multi();"></td>
<td width="100"><input type="number" id="dos" name="dos" onKeyUp="multi();"></td>
<td width="100"><input type="number" id="resultado" name="resultado"></td><!--recibe el resultado y necesito dos decimales-->
</tr>
</table>

Espero que te sea de ayuda, un saludo.

Gracias crack! Excelente aporte y explicación – Diego_Esquivel Apr 26 '20 at 23:51 — Diego_Esquivel, Apr 26 '20 at 23:51

¿Cómo limitar a dos decimales un input?

2 Answers2