Crear la entrada de moneda en HTML

Un campo numérico de HTML puede aceptar una cantidad, aplicar límites de rango y mostrar un número determinado de decimales después de que cambie el valor. Sin embargo, HTML no incluye un tipo de entrada de moneda: añadir type="number" no incorpora un símbolo monetario, separadores de millares ni formato adaptado a la configuración regional. El ejemplo usa HTML para la entrada numérica y jQuery para limitar y redondear el valor.

Por qué type="number" no es un formato de moneda

<input type="number"> proporciona un control numérico del navegador. Sus atributos min, max y step describen los valores numéricos aceptables, y el navegador puede ofrecer controles para introducir números. Estos atributos no definen cómo debe mostrarse el dinero. Un valor como 99.9 sigue siendo un número sin símbolo monetario ni separadores propios de una configuración regional.

Usa este control cuando quieras que las personas introduzcan un número y resulte útil limitar su rango. Para mostrarlo según una configuración regional, por ejemplo con un símbolo monetario y separadores de millares, dale formato por separado, por ejemplo con Intl.NumberFormat de JavaScript. Dar formato a un número para mostrarlo también es distinto de almacenar o validar importes monetarios con precisión; para los cálculos financieros se suelen usar unidades menores enteras o una biblioteca de aritmética decimal.

Crear una entrada numérica con requisitos de rango y precisión

Los siguientes atributos establecen un valor inicial y valores mínimos y máximos ilustrativos. Cámbialos según los requisitos de la aplicación. step="any" permite valores decimales que, de otro modo, no cumplirían la restricción predeterminada de incremento de uno de la entrada numérica; por sí solo, no redondea los valores a un decimal.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<input
  type="number"
  id="currencyInput"
  min="0.1"
  max="5000000.0"
  step="any"
  value="99.9"
/>

JavaScript puede limitar un número finito a esos extremos y usar el método toFixed() con 1 para producir una cadena con un dígito después del separador decimal. Este ejemplo se ejecutó y mostró 1234.6:

const min = 0.1;
const max = 5000000.0;
const entered = 1234.56;
const bounded = Math.min(max, Math.max(min, entered));
console.log(bounded.toFixed(1));

1234.6

Gestionar cambios con JavaScript y jQuery

El evento change se activa después de que la persona modifica el campo y confirma el cambio, por lo general al salir del control. No hace falta pulsar Intro. Usa el evento input si la interfaz debe responder mientras se edita el valor. En una entrada numérica, valueAsNumber devuelve un número o NaN cuando el campo no contiene un valor numérico utilizable. Comprueba ese valor antes de limitarlo para que el controlador no sustituya por uno de los límites un campo que se está editando o se ha borrado.

El controlador siguiente lee min y max de la entrada, deja intactos los valores no finitos, limita los valores finitos y, después, escribe de nuevo la cadena con un decimal. toFixed(1) redondea a la décima más cercana y devuelve una cadena; no siempre redondea hacia arriba. El resultado es una cadena numérica, no un formato de moneda.

Usar el ejemplo completo de entrada de moneda

Este ejemplo de una página web requiere que jQuery esté cargado. El complemento personalizado añade un controlador a cada entrada seleccionada. El fragmento conserva el mismo rango ilustrativo y el valor inicial indicados antes.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<input
  type="number"
  id="currencyInput"
  min="0.1"
  max="5000000.0"
  step="any"
  value="99.9"
/>

<script>
  $.fn.currencyInput = function () {
    return this.on("change", function () {
      const value = this.valueAsNumber;
      if (!Number.isFinite(value)) return;

      const min = Number.parseFloat($(this).attr("min"));
      const max = Number.parseFloat($(this).attr("max"));
      const bounded = Math.min(max, Math.max(min, value));
      $(this).val(bounded.toFixed(1));
    });
  };

  $(function () {
    $("#currencyInput").currencyInput();
  });
</script>

Al cargar la página, el campo muestra inicialmente 99.9. Después de confirmar un cambio, un valor finito inferior al mínimo se establece en 0.1, y uno superior al máximo, en 5000000.0. Los valores dentro del rango se redondean a un decimal. El código no modifica el valor mientras se escribe porque escucha el evento change.

Entender qué valida y qué no valida el ejemplo

Las restricciones de HTML ayudan al navegador a detectar valores fuera del rango permitido, mientras que el controlador limita explícitamente los valores finitos cuando se confirma un cambio. Si el valor está vacío o no es finito, se deja intacto para que la persona lo corrija; este ejemplo no hace que el campo sea obligatorio. Si la aplicación debe rechazar ese valor, añade un mensaje de validación independiente e impide el envío hasta que la entrada sea válida.

Este comportamiento no garantiza que los datos enviados sean válidos ni confiables. Vuelve a validar el valor en el servidor y aplica allí las reglas de precisión y redondeo monetario de la aplicación. Aquí, toFixed(1) sirve para mostrar un número con un decimal, pero no añade un símbolo monetario, separa los millares, selecciona una configuración regional ni ofrece una representación financiera completa.