1

Tengo un campo tipo number en mi tabla de longitud (12,3) es decir, que mi aplicación solo debería dejarme ingresar hasta 9 dígitos delante del dígito separador y hasta 3 después de este.

¿Alguien sabe cómo construir esta máscara en mi input en HTML o en JavaScript?

2 respuestas 2

2

Puedes utilizar regex para verificar la máscara.

const input = document.querySelector("#myInput")

input.onkeydown = (e)=>{

    const currentValue = input.value;
 
    const regex = /^\d{0,9}(\.\d{1,3})?$/

    setTimeout(function(){
      const newValue = input.value

      if(!regex.test(newValue))
        input.value = currentValue; 
    }, 0); 

}
 <input id="myInput" type="number">

6
  • no funciona, da error al añadir cualquier decimal (ej. 1.1) y permite números enteros mayores de nueve cifras si sigues escribiendo en el input.
    – Carmen
    Commented el 22 abr. 2020 a las 7:46
  • No entiendo, el script te bloquea y lo máximo que puedes escribir es: 999999999.999 Commented el 22 abr. 2020 a las 7:49
  • escribe 1.1 por ejemplo y clicka fuera, da error. Y me acaba de dejar escribir 999999999999999999999999999999 sin dar error. Estoy en Firefox.
    – Carmen
    Commented el 22 abr. 2020 a las 7:51
  • Ya verifiqué con Firefox y sí. está muy raro, no sé si sea incompatibilidad de stackoverflow o de Firefox. Podrías verificar con chrome?. También, podrías copiar eso en tu editor de código y abrirlo con Firefox?. Tal vez el problema sea la función de ejecutar en la página con el navegador. En chrome funciona bien. Commented el 22 abr. 2020 a las 7:58
  • He hecho un fidlle jsfiddle.net/a9e5dtz2 con tu código, funciona en Chrome y efectivamente falla en Firefox
    – Carmen
    Commented el 22 abr. 2020 a las 8:03
2

Una forma sencilla es restringir los valores mínimo y máximo en el input, y para que tenga hasta 3 decimales se define con step. Valores que no cumplan estos criterios darán error en el input.

Este sería un ejemplo:

<input type="number" step="0.001" min="0" max="999999999.999">

2
  • pues no funciona correctamente si agregas 9999.9999 no envia error Commented el 21 abr. 2020 a las 19:01
  • @MiguelZarate si pones 9999.9999 y a continuación clickas fuera veras que el campo marca error (se bordea en rojo) porque no pasa la validación html
    – Carmen
    Commented el 22 abr. 2020 a las 7:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.