2009-03-10 6 views
8

Ich habe in Eingabefeld, das nur numerische Werte (unter Verwendung von this Plugin) enthalten kann.
Jetzt mag ich den Eingang unten sein, sage 90. Wird ein Wert eingegeben ist, dass dieser max Kappe überschreitet oder nicht analysiert werden kann, sollte der vorherige Wert eingefügt werden. Standardmäßig enthält das Feld "1".Halte Wert in HTML-Eingabefeld unten festgelegten Betrag

<input id="targetQuantity" name="targetQuantity" type="text" value="1" /> 

Ich stelle mir vor, ich sollte den aktuellen Wert irgendwie fangen. Versuchen Sie, den neuen Wert zu analysieren. Wenn es ein zulässiger Wert ist, fahren Sie mit diesem Wert fort, wenn nicht, setzen Sie den alten zurück.
Da meine JS-Fähigkeiten wirklich begrenzt sind, weiß ich nicht mal, welche Ereignisse mir zur Verfügung stehen und finde die Dokumentation, die ich auf dem intarwebz gefunden habe, eher verwirrend.

--EDIT--
Ich endete mit Sergei's Code und Verwendung Aaron's Benutzerfreundlichkeit Beratung.
Alles, was ich jetzt suche, ist die Aktivierung/Deaktivierung der Einreichung eines ganzen Formulars. Das Deaktivieren einer Übermittlungsschaltfläche reicht nicht aus.

+0

Warum dies tun mit Javascript? Warum nicht einfach maxlength = "90" zu den Attributen des Eingabeelements hinzufügen? – robertc

+1

weil maxlength 90 Zeichen erlaubt. er will maxvalue, wenn es existiert ... – Spikolynn

+0

Duh! Sollte das genauer gelesen haben ... – robertc

Antwort

6
<input id="targetQuantity" name="targetQuantity" type="text" value="1" onkeyup="check(this)" /> 

... JavaScript:

var v=1; 

function check(i) {  
    if(i.value > 100) { 
    i.value=v; 
    alert("< 100"); 
    } 
    else 
    v=i.value; 
} 
2

soll Diese helfen: JavaScript Madness: Keyboard Events

Nun ein Wort auf der Benutzerfreundlichkeit: Nie den Wert als die Typen Benutzer ändern. Wenn Sie wissen wollen, warum, versuchen Sie es.

Stattdessen drehen Sie das Feld rot (die Hintergrundfarbe). Wenn das Formular gesendet wurde, führen Sie die Überprüfung erneut aus, um sicherzustellen, dass der Benutzer den Fehler behoben hat. Wenn nicht, zeigen Sie eine Inline-Nachricht ("Wert muss < 90" sein) irgendwo in der Nähe des Feldes an und setzen Sie den Fokus auf das Feld.

Verwenden Alarm nicht(). alert() dient nur zum Debuggen und wird in einer echten Webanwendung nicht verwendet, da es a) den Arbeitsfluss des Benutzers unterbricht und b) nicht funktioniert, wenn der Benutzer tippt: Eventuell trifft der Benutzer den Space und den Dialog wird geschlossen, möglicherweise mit dem Benutzer, der jemals bemerkt, dass es einen Dialog gab oder was es sagte.

Sie können eine Bibliothek wie jQuery oder Prototype auschecken, weil sie bereits alle Bausteine ​​enthalten, die Sie benötigen, und sie beheben eine Menge der Browser-Bugs für Sie.

+0

Danke für den Hinweis. Ich verwende keine Warnungen außer für das Debugging. Tatsächlich sind sie der Grund, warum ich die meiste Zeit ohne Skript in Opera surfe. Außerdem verwende ich bereits JQuery. –

1

schreiben diese js in einem JavaScript-Code-Block:

var LastGood = 1; 
function CheckValue(input, max) { 
    var value = Number(input.value); 
    if (NaN == value || input.value>max) { //it is not a number or is too big - revert 
     input.value = LastGood; 
    } else { //it is ok, save it as the last good value 
     LastGood = value; 
    } 
} 

Änderung Ihrer Eingabemaske

<input id="targetQuantity" name="targetQuantity" type="text" value="1" onkeyup="CheckValue(this, 90)" />