Begrenzen Eingabefeld auf 0-100

Question

Ich habe ein Eingabefeld, das Werte von 0-100 nimmt. Ich möchte verhindern, dass Benutzer etwas Größeres oder Kleineres schreiben.

Ich habe mit dem jQuery-Plugin keyfilter die Eingabe eines Feldes zu begrenzen: http://code.google.com/p/jquery-keyfilter/

Dieses Plugin die Eingabe in Ziffern begrenzen, aber nicht innerhalb eines Bereichs. Wie verhindere ich, dass Benutzer Zahlen eingeben, die den Bereich überschreiten? Vielen Dank.

Answer 1

Verwenden Ebene Javascript wie folgt aus:

<script> 
    function handleChange(input) { 
    if (input.value < 0) input.value = 0; 
    if (input.value > 100) input.value = 100; 
    } 
</script> 

dann das Eingabefeld wie folgt erklären:

<input type="text" onchange="handleChange(this);" /> 

Weil Sie diese Funktion angeschlossen haben onChange(), wird es funktionieren, selbst wenn ein Benutzer Kopieren/Einfügen von etwas in das Eingabefeld.

Answer 2

Sie müssen nur den Wert des Feldes nach jedem Tastendruck testen und bevor es an das Feld gesendet wird (zum Beispiel mit einem Tastendruck Event Handler) - wenn der neue Tastendruck einen zu hohen Wert erzeugen würde, dann die Taste drücken .

Zum Beispiel - wenn der aktuelle Wert 20 ist und der Benutzer versucht, eine dritte Nummer einzugeben, sollten Sie die Taste drücken, indem Sie false aus dem Event-Handler zurückgeben. Grundsätzlich ist das einzige dritte Zeichen, das Sie zulassen sollten, "0" und nur, wenn der aktuelle Feldwert "10" ist.

Answer 3

<input type="text" id="test_id" /> 
<script> 
document.getElementById("test_id").onkeyup=function(){ 
    var input=parseInt(this.value); 
    if(input<0 || input>100) 
    alert("Value should be between 0 - 100"); 
    return; 
}  
</script> 

Answer 4

Ich würde vorschlagen, das jQuery Validation Plugin zu verwenden. Sehr flexibel und erweiterbar. Um Ihren Bereich zu behandeln, fragen Sie Folgendes ab. Es wird vorausgesetzt, dass alle Eingaben in Ihrem Formular, die mit der Klasse "Prozentsatz" markiert sind, vorhanden sind und in den angegebenen Bereich fallen.

$("#myform").validate({ 
    rules: { 
    percentage: { 
     required: true, 
     range: [0, 100] 
    } 
    } 
}); 

<input id="percent" name="percent" class="percentage" /> 

Der Grund, dass ich das Plugin vorschlagen ist, dass es viele Validierungs Situationen aus der Box behandelt, Sie von der Verantwortung entlastet Validierungscode für viele Szenarien zu schreiben - Sie Ihren kreativen Aufwand in besseren Möglichkeiten aufwenden können . Es wird auch von vielen Leuten benutzt und hat den zusätzlichen Vorteil, von einer großen Gemeinschaft verbessert zu werden.

aktualisieren: Auch mögen Sie vielleicht einen alternativen Eingabemechanismus, wie ein slider (demo) zu berücksichtigen, die die Daten in einer Art und Weise einschränken werden, die Benutzerfehler unterliegen nicht - oder zumindest nicht diese bestimmte Art von Fehler.

Answer 5

Wenn seine nur für die Anzahl der Zeichen, die nicht von 20 oder weniger (zum Beispiel), dann können Sie

<input type="text" name="usrname" maxlength="20" /> 

verwenden Wenn Sie einige andere Fälle, in das Eingabefeld zu handhaben müssen, dann wäre eine Funktion besser sein Möglichkeit.

Answer 6

können Sie Math.max und Math.min verwenden

val = Math.min(100,Math.max(0,val)); 

Answer 7

HTML5 added several new input types, einschließlich number.

<form> 
    Quantity (between 1 and 100): 
    <input type="number" name="quantity" min="1" max="100"> 
</form> 

Neue Eingabetypen, die nicht von älteren Web-Browsern unterstützt wird, wird als <input type="text"> verhalten.

Runnable example von W3Schools.