Cómo Permitir 2 Decimales en un Input de Tipo "Number" en HTML

Al momento de definir algunos campos de HTML como el de tipo numérico, puede que queramos cambiar la cantidad específica de decimales. Por ejemplo, cuando se trata de precios, es común querer que los usuarios ingresen valores con dos decimales exactos.

En este artículo vamos a conocer como podemos personalizar la cantidad de decimales en un campo HTML.

El elemento <input type="number"> en HTML permite a los usuarios ingresar valores numéricos; sin embargo, por defecto, no permite limitar la cantidad de decimales mediante un atributo que indique la cantidad mínima o base de definir la cantidad de decimales.

Podemos usar el atributo step para definir el intervalo entre valores pero esto no significa que los usuarios ingresen exactamente dos decimales.

Para lograr que un campo de entrada acepte solo dos decimales, podemos combinar HTML con JavaScript; primero, creamos un campo de entrada de tipo “number” y establecemos el atributo step en "0.01" para permitir dos decimales.

<input type="number" step="0.01" id="price">

Mediante JavaScript, agregamos un manejador de eventos para el evento input. Cuando el usuario ingrese un valor, verificamos si tiene dos decimales. Si no, redondeamos automáticamente el valor a dos decimales.

const priceInput = document.getElementById("price");

// Aseguramos que el valor inicial tenga el formato correcto
priceInput.value = priceInput.valueAsNumber.toFixed(2);

// Manejador que asegura que el valor tenga el formato correcto al modificarse
priceInput.addEventListener("input", function (event) {
  event.target.value = event.target.valueAsNumber.toFixed(2);
});

Y esto es todo, al final, todo se reduce al agregar un evento para cuando escribe el usuario y redondear a dos decimales en caso de que sea necesario.

En resumen, muchas veces tenemos un campo de texto el cual queremos representar un precio o en definitiva un valor numérico con parte decimal; si estas al dia con HTML5, sabes que puedes definir un campo de tipo number

Tengo un <input type = "number">

El problema es, que solamente va a aceptar numero enteros; si quieres parte decimal, que es nuestro objetivo, tienes que definir el parámetro step, para indicar el intervalo; en nuestro caso, como queremos que sea de dos decimales:

step=".01"

Si quisieras por ejemplo, de 3

step=".001"

En definitiva:

<input type = "number" step=".01">