Valores máximos y mínimos en un cuadro de texto

Tengo un cuadro de texto. ¿Hay alguna manera en la que el valor más alto que el usuario puede ingresar es 100 y el más bajo es 0?Valores máximos y mínimos en un cuadro de texto

Entonces, si el usuario escribe en un número más de 100, cambiará automáticamente el valor a 100 usando la función keyup() y si el usuario escribe en un número menor que 0, se mostrará como 0?

Mi cuadro de texto es el siguiente:

<input type="text" name="textWeight" id="txtWeight" maxlength="5"/>%</td>

se puede hacer esto utilizando JavaScript?

Fuente

2012-01-06 BruceyBandit

simplemente defina la longitud max a 100 Eso es todo, no javascript necesario – Ibu

@lbu umm. . no. Eso solo evitará que el usuario escriba más de 100 caracteres – Eonasdan

Sé que puede que no se vea bonito, pero ¿hay algo que le impida usar un cuadro de selección? Todavía puede escribir un número si el cuadro tiene el foco y limita los valores sin un JS innecesario. – Matt

Aquí es una función simple que hace lo que necesita:

<script type="text/javascript"> 
function minmax(value, min, max) 
{ 
    if(parseInt(value) < min || isNaN(parseInt(value))) 
     return 0; 
    else if(parseInt(value) > max) 
     return 100; 
    else return value; 
} 
</script> 
<input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value = minmax(this.value, 0, 100)"/>

Si la entrada no es numérico lo reemplaza con un cero

Fuente

2012-01-06 17:36:51 Nikoloff

¿por qué le gustaría cambiar la entrada a 0? el usuario puede incluso no darse cuenta de que esto ha sucedido. Algún tipo de validación sería mejor. – Eonasdan

'else if (parseInt (valor)> max) return max; ' devuelve el valor máximo. –

Si estás bien con HTML5 se puede llevar a cabo sin ningún tipo de código JavaScript en todo ...

<input type="number" name="textWeight" id="txtWeight" max="5" min="0" />

De lo contrario, algo así como ...

var input = document.getElementById('txtWeight'); 

input.addEventListener('change', function(e) { 
    var num = parseInt(this.value, 10), 
     min = 0, 
     max = 100; 

    if (isNaN(num)) { 
     this.value = ""; 
     return; 
    } 

    this.value = Math.max(num, min); 
    this.value = Math.min(num, max); 
});

Esto sólo se restablecerá los valores cuando la entrada pierde el foco, y borra cualquier entrada que no se puede analizar como un entero ...

ADVERTENCIA OBLIGATORIA

Debe siempre realizar la validación adecuada del lado del servidor en las entradas, independientemente de la validación del lado del cliente.

Fuente

2012-01-06 17:29:11 jondavidjohn

El atributo máximo actualmente solo es compatible con Opera y Chrome. – Evert

probablemente debería verificar para asegurarse de que el valor sea un número – Eonasdan

@Eonasdan buen punto. – jondavidjohn

Si no está utilizando HTML5, esta es una validación bastante básica del formulario de JavaScript.

Nota al margen - Cambiaría el valor a 0 en el evento de desenfoque en lugar de en la tecla (como usuario, creo que cambiar el texto mientras estoy escribiendo sería molesto).

Fuente

2012-01-06 17:32:26 Tim

Sí, puede! Primero debería considerar establecer el valor de maxlength en 3 y luego escribir un controlador de eventos para keyup-event.

La función puede evaluar la entrada del usuario usando regex o parseInt para validar la entrada del usuario y establecerla en cualquier valor deseado, si la entrada es incorrecta.

Fuente

2012-01-06 17:32:48 Mithrandir

Depende del tipo de números y lo que permitirá. Manejar números con decimales es más difícil que simples enteros. Manejar situaciones donde se permiten múltiples culturas es más complicado nuevamente.

Los fundamentos son los siguientes:

controlar el evento "pulsación de tecla" del cuadro de texto. Cuando se ha presionado un carácter que no está permitido, cancele el procesamiento posterior del evento para que el navegador no lo agregue al cuadro de texto.
Al manejar "presionar teclas", a menudo es útil crear de manera simple la nueva cadena potencial en función de la tecla presionada. Si la cadena es un número válido, permita el kepress. De lo contrario, tira la tecla. Esto puede enormemente simplificar parte del trabajo.
Gestione potencialmente el evento "keydown" si le preocupan las teclas que "keypress" no maneja.

Fuente

2012-01-06 17:36:49

normalmente me gustaría hacer algo como esto (onBlur), pero podría estar unido a cualquiera de los eventos:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script type="text/javascript"> 
function CheckNo(sender){ 
    if(!isNaN(sender.value)){ 
     if(sender.value > 100) 
      sender.value = 100; 
     if(sender.value < 0) 
      sender.value = 0; 
    }else{ 
      sender.value = 0; 
    } 
} 

</script> 
</head> 

<body> 
<input type="text" onblur="CheckNo(this)" /> 
</body> 
</html>

Fuente

2012-01-06 17:54:25 Evert

establecer atributos en CodeBehind

textWeight.Attributes.Add("minimum", minValue.ToString()); 
textWeight.Attributes.Add("maximum", maxValue.ToString());

Resultado:

<input type="text" minimum="0" maximum="100" id="textWeight" value="2" name="textWeight">

Por jQuery

jQuery(document).ready(function() { 

     var textWeight = $("input[type='text']#textWeight"); 

     textWeight.change(function() { 

       var min = textWeight.attr("minimum"); 

       var max= textWeight.attr("maximum"); 

       var value = textWeight.val(); 

       if(val < min || val > max) 
       { 
        alert("Your Message"); 

        textWeight.val(min); 
       } 

     }); 
    });

Fuente

2014-02-10 19:36:46 Ehsan

Su bastante simple querida puede utilizar validador gama

<asp:TextBox ID="TextBox2" runat="server" TextMode="Number"></asp:TextBox> 
<asp:RangeValidator ID="RangeValidator1" runat="server" 
    ControlToValidate="TextBox2" 
    ErrorMessage="Invalid number. Please enter the number between 0 to 20." 
    MaximumValue="20" MinimumValue="0" Type="Integer"></asp:RangeValidator> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
    ControlToValidate="TextBox2" ErrorMessage="This is required field, can not be blank."></asp:RequiredFieldValidator>

de lo contrario ca n usar JavaScript

<script> 
function minmax(value, min, max) 
{ 
    if(parseInt(value) < min || isNaN(parseInt(value))) 
     return 0; 
    else if(parseInt(value) > max) 
     return 20; 
    else return value; 
} 
</script>       
<input type="text" name="TextBox1" id="TextBox1" maxlength="5" 
onkeyup="this.value = minmax(this.value, 0, 20)" />

Fuente

2017-02-01 12:26:35

https://jsfiddle.net/co1z0qg0/141/

<input type="text"> 
<script> 
$('input').on('keyup', function() { 
    var val = parseInt($(this).val()), 
     max = 100; 

    val = isNaN(val) ? 0 : Math.max(Math.min(val, max), 0); 
    $(this).val(val); 
}); 
</script>

o mejor

https://jsfiddle.net/co1z0qg0/142/

<input type="number" max="100"> 
<script> 
$(function() { 
    $('input[type="number"]').on('keyup', function() { 
     var el = $(this), 
      val = Math.max((0, el.val())), 
      max = parseInt(el.attr('max')); 

     el.val(isNaN(max) ? val : Math.min(max, val)); 
    }); 
}); 
</script> 
<style> 
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
} 
input[type="number"] { 
    -moz-appearance: textfield; 
} 
</style>

Fuente

2018-02-08 01:49:04 asdasd

Valores máximos y mínimos en un cuadro de texto

Respuesta

Cuestiones relacionadas