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 cómo podemos personalizar la cantidad de decimales en un campo HTML.
El Atributo type="number" y sus Desafíos con Decimales
HTML5 define un tipo “number” para los input de un formulario pero por defecto solo admite números enteros. Cuando estamos desarrollando un formulario y necesitamos que un input solo acepte datos de tipo numérico lo más rápido y “correcto” en HTML es hacer:
Correcto, con esto logramos que el input solo acepte números mas no texto, tirándonos un error si colocamos texto dentro de este campo. Pero si deseamos ingresar datos con decimales ahí es en donde vienen los problemas. Cabe resaltar que en realidad no es un error; el campo (input) de formulario se comporta como se define por el W3C. Campos de entrada numéricos pueden tener atributos adicionales «min» y «step», que limitan el rango de valores permitidos en su entrada. Sin embargo, con el código anterior, nos daremos cuenta muy pronto que no nos deja introducir números decimales del tipo 4.5 ó 5.90.
Habilitando Decimales con el Atributo step
¿Y cómo hacemos para que el input type number acepte números decimales? Type number también permite números con decimales, pero sólo si se lo indicamos mediante el atributo step. El atributo «step» es menos intuitivo: al jugar con diferentes valores, lo más probable es hacer ejercicio que controla el aumento / disminución al hacer clic en los botones arriba / abajo en el campo. En step podemos definir cuánto queremos que este valor suba o baje en cada click, y, fundamentalmente, definirlo como un valor decimal.
Lea también: IVA 21% Excel
Controlando la Cantidad de Decimales
Para lograr que un campo de entrada acepte un número específico de decimales, es fundamental el atributo step. El número de decimales dependerá de cuántos ceros añadamos. A continuación, se presentan algunos ejemplos de cómo el valor de step influye en la cantidad de decimales permitidos:
- Para permitir números enteros: step="1"
- Para permitir números con 1 decimal (como en un "decimal 9 1"): step="0.1"
- Para permitir números con 2 decimales: step="0.01"
- Para permitir números con más precisión (por ejemplo, 4 decimales): step="0.0001"
- Para permitir cualquier cantidad de decimales: step="any"
Si ponemos el valor de step como «0.01» nos permitirá meter decimales con dos cifras, lo que suele ser lo más habitual. Para un "input de tipo decimal 9 1", es decir, que acepte hasta 9 dígitos enteros y 1 decimal, deberíamos establecer el atributo step en '0.1' y el atributo max en un valor como '999999999.9'. El campo no validará si introducimos más decimales de los indicados por el valor de step.
A modo de ejemplo para un campo que acepte un decimal:
Para lograr que un campo de entrada acepte solo dos decimales y añadir una capa de validación personalizada, 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. Luego, mediante JavaScript, agregamos un manejador de eventos para el evento input, y cuando el usuario ingrese un valor, verificamos si tiene dos decimales.
Lea también: Guía IVA reducido
Separadores Decimales y Validación Adicional
Como último detalle relativo a los decimales, type number considera a ambos, «,» y «.», separadores decimales. Es por ello que las cifras largas no los incluyen cada tres ceros, como separadores de millares. Ni tampoco permite escribir más de uno de ellos.
Nota: Firefox soporta variaciones lingüísticas en la representación, esto afecta a los dígitos, pero también al separador. Sin embargo, no los restringe a uno u otro a la hora de escribirlos, sino que sólo los representa con el que sería el separador por defecto en el idioma indicado cuando toma el valor del atributo value.
Mi recomendación aquí, si se necesita un formato específico para los separadores de millares o para manejar casos complejos de entrada de datos, sería usar una máscara para añadir puntos o comas como separadores.
Además del control de decimales, los campos numéricos ofrecen otras opciones de validación: si queremos evitar que se introduzcan valores negativos deberemos incluir el atributo min=0. Type number no acepta maxlength pero sí max, que nos permite no sólo definir la longitud del string, sino también su valor. Si necesitásemos introducir valores altos, pongamos por ejemplo un campo de formulario bancario, podríamos acotar mediante los atributos min y max las cantidades posibles.
Mejorando la Experiencia del Usuario y la Compatibilidad
La mayoría de los navegadores mostrarán dos flechas en los campos de tipo number, para aumentar y decrementar su valor. Los campos numéricos se personalizan como cualquier otro elemento de texto (con algunos añadidos). Observa que hay unos botones para cambiar el valor numérico cuando mueves el ratón sobre el campo de texto. Combinado con input type="number", el uso de JavaScript es imprescindible para validar on submit el valor del campo vía JS o incluso serverside para una robusta validación.
Lea también: ¿Cómo localizar tus XML del SAT?
Para optimizar la experiencia en dispositivos móviles, especialmente con teclados virtuales:
- En iOS, si usamos ciertos patterns como [0-9]* o \d*, automáticamente se ofrecerá el teclado numérico.
- Si queremos una solución multiplataforma (iOS + Android) que nos permita REGEX más avanzadas, deberemos usar inputmode="numeric" o inputmode="decimal".
- A pesar de lo que he leído en otras publicaciones, en iOS el valor numeric desplegará un teclado numérico básico, mientras el teclado asociado a decimal incluirá también la coma o punto decimales.
- Deberemos asegurarnos que el teclado ofrecido nos permite introducir todos los caracteres válidos deseados, ya sean definidos por la REGEX o por input type.