1

Busque información pero solo lo valida cuando termine de escribir, por ejemplo el siguiente código:

$('.number').on('input', function () { 
  this.value = this.value.replace(/[^0-9]/g,'');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Primer Input</p>
<input type="text"  pattern="^[0-9]{0,12}([,][0-9]{2,2})?$" class="form-control" required /><br>

<p>Segundo Input</p>
<input type="text" class="form-control number" required /><br><br>

El primer input valida números enteros y decimales, pero no al momento de escribir. El segundo input sí valida al momento de escribir, no se mucho de expresiones regulares así que solamente copie y pegue la expresión para que pueda validar como el segundo input, pero no funciona.

$('.number').on('input', function () { 
  this.value = this.value.replace(/^[0-9]{0,12}([,][0-9]{2,2})?$/g,'');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="form-control number" required />

Si me podrían ayudar, si no me entendieron: quiero que valide como el segundo input, al escribir no me permita colocar letras, solo números enteros y decimales, gracias a todos.

6
  • la segunda expresión es una clase de bootstrap eso te sirve del lado del cliente, podrías intentar a hacer una combinación, intenta y mira si te funciona algo asi: <input type="text" pattern="^[0-9]{0,12}([,][0-9]{2,2})?$" class="form-control number" required /><br> el 30 nov. 2020 a las 14:12
  • Si funciona pero lo que quiero es que no pueda escribir letras, solo numeros enteros y decimales con punto el 30 nov. 2020 a las 14:14
  • 1
    ¿Responde esto a tu pregunta? Expresión regular para validar que un numero tenga como símbolo decimal la coma el 30 nov. 2020 a las 15:17
  • La he votado duplicada porque en este comemtario planteas que sólo necesitas la expresión regular. el 30 nov. 2020 a las 15:18
  • @MauricioContreras pero no esta con la funcion on, esto se tiene que validar cuando escribe. Probe la exprecion, lo puse en el on pero tampoco funciona, nose si lo estoy colocando mal, podrias dar una respuesta ponienda dicha exprecion en el on correctamente? el 30 nov. 2020 a las 15:28

3 respuestas 3

0

No estoy seguro de si esto es lo que buscas,
Asi que no añadiré explicación aún.

function limitDecimalPlaces(e, count) {
  if (e.target.value.indexOf('.') == -1) { return; }
  if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
    e.target.value = parseFloat(e.target.value).toFixed(count);
  }
}

function isNumberKey(evt)
{
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
    return false;

  return true;
}
<input type="number" oninput="limitDecimalPlaces(event, 2)" onkeypress="return isNumberKey(event)"  />

2
  • Evita mezclar lógica con presentación. Los atributos oninput y onkeypress mezclan la lógica con la presentación. Es preferible usar element.addEventListener(). Por otro lado, yo usaría el evento keyup antes (en vez) que el evento keypress. Saludos el 30 nov. 2020 a las 14:58
  • Si es lo que quiero, pero hay alguna forma de hacerlo por exprecion regular? O mas bien, porque la exprecion regular que se usa en el primer input funciona y cuando lo pongo con el on no funciona el 30 nov. 2020 a las 15:01
0

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode != 46 && charCode > 31 &&
    (charCode < 48 || charCode > 57))
    return false;

  return true;
}
<INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">

1
  • Aparte del código, deberias explicarlo para que se entienda mejor la respuesta. Mírate ¿Cómo escribo una buena respuesta?... Aparte de eso, he probado tu código y solo permite decimales de punto (en mi localización usamos coma, por ejemplo) y ademas me permite poner tantos puntos como quiera. Si bien se aproxima a la solución, no es una buena respuesta aun.
    – masterguru
    el 15 ene. 2022 a las 17:53
0

Aunque ha pasado mucho tiempo aquí dejo una solución para futuros desarrolladores.

Puedes ver el orden de las teclas en este enlace

El siguiente input solo acepta números y punto (.), lo validamos con keypress:

<input type="text" class="form-control" onkeypress="if(event.keyCode < 46 || event.keyCode > 57 || event.keyCode == 47) event.returnValue = false;" required />

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.