periodico - Hacer una entrada de número html siempre mostrar 2 lugares decimales

cómo convertir un número decimal a fracción

Question

Estoy creando un formulario en el que el usuario puede ingresar un monto en dólares utilizando una etiqueta de entrada de número html. ¿Hay alguna forma de que el cuadro de entrada siempre muestre 2 decimales?

Answer 1

Busque en los toFixed de Javascript toFixed . Podría escribir una función onChange para su campo de número que llame a FIXed en la entrada y establezca el nuevo valor.

Answer 2

Entonces, si alguien más encuentra esto, hay una solución de JavaScript para este problema:

Paso 1: Conecte su caja de entrada de número HTML a un evento onchange

myHTMLNumberInput.onchange = setTwoNumberDecimal;

o en el código html si así lo prefiere

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

Paso 2: Escribe el método setTwoDecimalPlace

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

Al cambiar el ''2'' en toFixed , puede obtener más o menos lugares decimales si así lo prefiere.

Answer 3

La solución aceptada aquí es incorrecta. Intenta esto en el HTML:

onchange="setTwoNumberDecimal(this)" 

y la función para parecerse a:

 function setTwoNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(2);
    };

Answer 4

Lo que otras personas publicadas aquí funcionó principalmente, pero usar onchange no funciona cuando cambio el número usando flechas en la misma dirección más de una vez. Lo que funcionó fue en oninput . Mi código (principalmente de MC9000):

HTML

<input class="form-control" oninput="setTwoNumberDecimal(this)" step="0.01" value="0.00" type="number" name="item[amount]" id="item_amount">

JS

function setTwoNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(2);
    };

Answer 5

Puede usar el cuadro de texto numérico de Telerik para muchas funcionalidades

<input id="account_rate" data-role="numerictextbox" data-format="#.000" data-min="0.001" data-max="100" data-decimals="3" data-spinners="false" data-bind="value: account_rate_value" onchange="APP.models.rates.buttons_state(true);" />

El código básico es de descarga gratuita.

Answer 6

Pure HTML no es capaz de hacer lo que quieres. Mi sugerencia sería escribir una función javascript simple para hacer el roudning por ti.

Answer 7

una solución en línea combina las sugerencias de Groot e Ivaylo en el siguiente formato:

onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)"