Limitar valor maximo en un input?

malcomxar · #1 (**permalink**) 24/11/2011, 21:44

Hola foreros!

Queria saber si es posible limitar el valor a insertar en un input.

O sea, si en el input se inserta un valor numerico mayor a X, que ese valor se cambie automaticamente a X

Saludos!

emprear · #2 (**permalink**) 24/11/2011, 22:57

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>número mayor que</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
// con esta función comprobás que sea un número
function es_numero(input){
return !isNaN(input)&&parseInt(input)==input;
}
//ahora verificas que sea no sea mayor que 5
function comprobar(){
 
var laedad = document.getElementById('edad').value;  
if(es_numero(laedad)){
if(laedad > 5){
alert("Número mayor que 5\n\rsu número: " + laedad);
 document.getElementById('edad').value= 5;
}
} else{
alert("Debe ingresar un número");
}
 
}
//]]>
</script>
</head>
<body>
<form action="#">
<p>
El campo debe de tener un valor y este ser menor ó igual a 5    <br />
<input type="text" name="edad" id="edad" onblur="comprobar()"/>
</p>
</form>
</body>
</html>

Saludos

Bier · #3 (**permalink**) 27/11/2011, 16:31

Muy interesante el código mostrado.
Es justo lo que requiero, solo que:

Mi formulario tiene varios campos, ¿Como puedes enviar desde el mismo
onblur="comprobar() el valor máximo permitido?

Quizá sea algo así: onblur="comprobar(5)

Ahora: ¿Como tomar este valor en la función?

Gracias

emprear · #4 (**permalink**) 27/11/2011, 20:35

Digamos que tenes varios campos y diferentes valores, entonces pasarias a la funcion el valor y el campo sobre el que estás trabajando

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>número mayor que</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
// con esta función comprobás que sea un número
function es_numero(input){
return !isNaN(input)&&parseInt(input)==input;
}
//ahora verificas que sea no sea mayor que 5
function comprobar(campo,val_num){
 
var elvalor = document.getElementById(campo).value;  
if(es_numero(elvalor)){
 
if(elvalor > val_num){
document.getElementById(campo).value= val_num;
alert("Número mayor que "  +val_num + "\n\rsu número: " + elvalor);
document.getElementById(campo).style.backgroundColor = "red";
}else{
document.getElementById(campo).style.backgroundColor = "#FFF";
}
 
} else{
alert("Debe ingresar un número");
document.getElementById(campo).style.backgroundColor = "red";
}
 
}
//]]>
</script>
</head>

en ligar de pasar los nombres 'edad', 'peso', le damos al campo un id y pasamos el valor en forma generica con this.id, seguido del numero (sin comillas, ya que se supone que es un numero entero no una cadena.
Lo que no me queda muy claro es para que querés que se complete el campo con el valor del número automaticamente, si es para resaltar el error, podes darle un color de fondo al campo inválido Eso hice en el ejemplo)

Saludos

Bier · #5 (**permalink**) 27/11/2011, 21:33

Gracias emprear,

Te pido el gran favor de incluir el INPUT (el del FORM), He intentado haciendo pruebas y no logro hacerlo funcionar.
Desde el INPUT se debe indicar el valor máximo permitido.

Apenas estoy iniciando en esto de JS.

Gracias anticipadas.

emprear · #6 (**permalink**) 27/11/2011, 22:17

disculpas amigo, lo tenia hecho pero me comi el body al copiar y pegar

aca va completo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>número mayor que</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
// con esta función comprobás que sea un número
function es_numero(input){
return !isNaN(input)&&parseInt(input)==input;
}
//ahora verificas que sea no sea mayor que 5
function comprobar(campo,val_num){
 
var elvalor = document.getElementById(campo).value;  
if(es_numero(elvalor)){
 
if(elvalor > val_num){
document.getElementById(campo).value= val_num;
alert("Número mayor que "  +val_num + "\n\rsu número: " + elvalor);
document.getElementById(campo).style.backgroundColor = "red";
}else{
document.getElementById(campo).style.backgroundColor = "#FFF";
}
 
} else{
alert("Debe ingresar un número");
document.getElementById(campo).style.backgroundColor = "red";
}
 
}
//]]>
</script>
</head>
<body>
<form action="#">
<p>
El campo debe de tener un valor y este ser menor ó igual a 5    <br />
<input type="text" name="edad" id="edad" onblur="comprobar(this.id,5)" /><br />
El campo debe de tener un valor y este ser menor ó igual a 130  <br />
<input type="text" name="edad" id="peso" onblur="comprobar(this.id,130)"/>
</p>
</form>
</body>
</html>

Saludos

Bier · #7 (**permalink**) 27/11/2011, 23:17

Estimado emprear,

Eres un mago, te super agradezco, ahora se encuentra exacto a como lo requiero.
Mi Form tiene varias validaciones, todas JS.
En cuanto lo finalice el proyecto lo publico aquí mismo, lo cual debe ser esta misma semana.

Mucho muy agradecido.

Saludos.

malcomxar · #8 (**permalink**) 13/12/2011, 21:55

Un poco tarde la respuesta pero gracias porque me re sirvio :)

Saludos!