5

Tengo una duda.

¿Se puede remplazar el valor escrito en un input por el máximo valor asignado?

Es decir, si el usuario ingresa un numero mayor al permitido esta que se remplace por x numero o mande un mensaje diciendo que el numero no está permitido.

Puse esto, pero en el input aún me deja ingresar más valores.

<input type='number' value='1' min='1' max='5'/>

2 respuestas 2

6

, es posible escuchando el evento keyup del input , luego capturamos el valor del atributo max y el value y realizamos la comparación , si lo que se ingreso es mayor , entonces se asigna el nuevo valor al input que se obtuvo anteriormente

$(function() {
	$(document).on('keyup', '#numero', function(event) {
    	let max= parseInt(this.max);
        let valor = parseInt(this.value);
    	if(valor>max){
    		alert("El Valor no está Permitido")
    		this.value = max;
    	}

	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' value='1' min='1' max='5' id="numero"/>

6
  • Muchas gracias! Commented el 8 abr. 2017 a las 21:18
  • Hice un else para remplazar con el valor mínimo si el valor es menor a 1 que me remplace por 1 pero no funciona? por que se deberá? :o Commented el 8 abr. 2017 a las 21:55
  • Esto: prntscr.com/eu4191 pero solo me remplaza por el max. Commented el 8 abr. 2017 a las 21:56
  • @JhosselinGiménez la variable min toma max también, cambiar por min
    – Dev. Joel
    Commented el 8 abr. 2017 a las 21:59
  • Ah, cierto. Error mio. Gracias! Commented el 8 abr. 2017 a las 22:01
1

Te dejo 2 rutinas que hablan por si solas,

podrás usar la que mas se adecue a tus necesidades, Saludos.. ;))

$(document).ready(function() {
 $(".noPermitir").on("keydown", function() {
  if(event.key.length<2) {
   var n=parseInt(this.value+event.key);
   if (isNaN(event.key) || n<this.min || n>this.max)
    return false;
  };
 });

 $(".reEmplazar").on("keydown", function() {
  if(event.key.length<2) {
   var n=parseInt(this.value+event.key);
   if (isNaN(event.key)) {
    return false;
   } else if (n<this.min) {
    this.value=this.min;
    return false;
   } else if (n>this.max) {
    this.value=this.max;
    return false;
   };
  };
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
No permitir valores menor a 1 o mayor a 100<br>
<input type="number" min="1" max="100" class="noPermitir"><br><br>
reEmplazar valores menor a 1 por 1 o mayor a 100 por 100<br>
<input type="number" min="1" max="100" class="reEmplazar">

3
  • 1
    Falla si escribes -1 por ejemplo. Así que luego de obtener var n podrían agregar if (isNaN(n)) { this.value=''; return false; } para no permitir valores negativo. [para el caso de noPermitir] y para el otro caso de reEmplazar if (n<this.min || isNaN(n)) { Commented el 12 dic. 2018 a las 2:56
  • 1
    Gracias!!! @Cesar por tu observación, hé corregido con isNaN(event.key) porque con isNaN(n) también falla si colocas "1-".
    – fwBasic
    Commented el 12 dic. 2018 a las 18:50
  • Ah bueno perfecto, gracias por la observación, voy a corregir donde lo use. Commented el 13 dic. 2018 a las 18:49

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.