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.