HTML Text Input erlauben nur zwei-stellige Numerische Eingabe

Ich bin neu in der JQuery Welt und ich bin versucht zu begrenzen Sie die Anzahl der Ziffern, die in einigen text-Feld die Eingaben in die Webseite, mit der ich arbeite auf es jetzt.
Ich möchte dem Benutzer ermöglichen:

geben Sie die Anzahl von zwei Ziffern nur
die Zahl sollte nicht den Wert überschreiten, der von 12, so kann er geben Sie die zahlen von 0 bis 12 wie 8, 11, 6.5

Wie kann ich das tun?

Hier ist, was ich bisher getan habe.
HTML-Code:

<input type="text" class="txt input-sm" />
<input type="text" class="txt input-sm" />

JQuery-Code:

<script>
            $(function(){
                $(".txt").on("keypress", function(){
                    if($(".txt").val().length > 2)
                    {
                        this.value = parseFloat(this.value).toFixed(2);
                    }
                });
            });
    </script>

du willst also die zahlen von 0 bis 12, was aber zu den zahlen dazwischen? Wollen Sie durchsetzen, einige Grenze-zu-dezimal-stellen, wie auch?

InformationsquelleAutor Technology Lover | 2015-01-10

1

können Sie jQuery verwenden, um entfernen Sie die unerwünschte Schlüssel-Zeichen dann überprüfen, um zu sehen, ob der Wert größer als 12. Die erste Veranstaltung ist keydown um zu sehen, ob die Zeichen, die gedrückt wird, erlaubt. Ich fügte hinzu, ein weiteres event für keyup weil der Wert nicht so registriert, bis nach "keyup"
```
$(".txt.input-sm").keydown(function (event) {

    //prevent using shift with numbers
    if (event.shiftKey == true) {
        event.preventDefault();
    }

    if (!((event.keyCode == 190) || (event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46)) {
        //not a number key or period so prevent
        event.preventDefault();
    }
});

$(".txt.input-sm").keyup(function (event) {

    var number = parseFloat($(this).val());
    if(number > 12){
       $(this).val("");
    }
});
```
GEIGE

UPDATE

Dies ist schwierig, weil der dezimal -, aber Sie können etwas tun, wie verwenden Sie einen Zähler Klicks.

NEW FIDDLE

ich danke Ihnen sehr für Ihre Hilfe. Jedoch, ich brauche Eure Hilfe, Folgendes: wenn der Benutzer versucht, geben Sie die Dritte Stelle, ich möchte das system um zu verhindern, dass ihn aus der Eingabe, die Ziffer (mit dem halten der beiden anderen zahlen, die er eingegeben) und ihm zu zeigen, eine sinnvolle Nachricht. Wie kann ich das im code?
meinen Beitrag aktualisiert mit einer neuen Geige

InformationsquelleAutor jmore009
0
```
<input type="number" min="0" max="12">
```
Sie müssen Schritt hinzufügen Attribut zu behandeln float-zahlen als 6.5

InformationsquelleAutor Damjan Pavlica

Also habe ich eigentlich abgeschlossen, eine Lösung für diese Frage vor zwei Tagen, aber ich hatte zu verlassen, bevor ich posten könnte eine Antwort. Wenn Sie weiterhin Hilfe benötigen, hier ist etwas zu schauen, aber es hat wahrscheinlich mehr Funktionen, als Sie brauchen-ich hatte Spaß 🙂

$(".txt").on("keyup", function(event) {

    //don't handle backspace, delete, pgup/pgdn, home/end, or arrow keys:
    if (event.keyCode === 8 || event.keyCode === 46 || event.keyCode >= 33 && event.keyCode <= 40) return false;

    var currentEl = $(this);
    var value = $(currentEl).val();

    //remove letters...
    value = value.replace(/[^0-9.-]/g, "");

    var hasDecPlace = value.match(/\./);

    //separate integer from decimal places:
    var pieces = value.split('.');
    var integer = pieces[0].replace('-', '');
    var decPlaces = ""
    if (pieces.length > 1)
    {
        pieces.shift();
        decPlaces = pieces.join('').replace('-', '');
    }

    //handle numbers greater than 12.00... :
    if (parseInt(integer) > 12 || parseInt(integer) === 12 && parseInt(decPlaces) > 0)
    {
        integer = "12";
        decPlaces = getZeroedDecPlaces(decPlaces);
        alert("number must be between 0.00 and 12.00");
    } //...and less than 0:
    else if (parseInt(integer) < 0)
    {
        integer = "0";
        decPlaces = getZeroedDecPlaces(decPlaces);
        alert("number must be between 0.00 and 12.00");
    }

    //handle more than two decimal places:
    if (decPlaces.length > 2)
    {
        decPlaces = decPlaces.substr(0, 2);
        alert("number cannot have more than two decimal places");
    }

    var newVal = hasDecPlace ? integer + '.' + decPlaces : integer;

    $(currentEl).val(newVal);
});

function getZeroedDecPlaces(decPlaces) {
    if (decPlaces === '') return '';
    else if (decPlaces.length === 1) return '0';
    else if (decPlaces.length >= 2) return '00';
}

--Zunächst Griff die keyup event--Werte nicht Hinzugefügt Eingänge bis nach keypress oder keydown

--Nicht mit bestimmten Tasten (return false). Sie können hinzufügen mehr zu dieser Liste.

--Nächste, unorthodoxe Ansatz, Griff-die Zahl, die als Zeichenfolge: Wenn Sie wirklich nicht wollen, zu einem <input type="number" /> tag, Urlaubsort, um regex zu nehmen, Briefen und anderen Müll aus der "Nummer".

--Nun, Erstens, festzustellen, ob ein Dezimalpunkt, so können Sie rekonstruieren die "Anzahl" (string) später. Als Nächstes trennen Sie die ganze Zahl von den Dezimalstellen.

--Jetzt mit zahlen, die größer 12.00 oder weniger als 0,00 durch das Parsen der Zahl (und den Dezimalstellen, wenn die number === 12). Habe ich eine Funktion (getZeroedDecimalPlaces) zu vermeiden, hinzufügen von zusätzlichen Nullen an, oder entfernen von Nummern aus, die Nutzer-string.

--Nächste begrenzen Sie die Anzahl der Dezimalstellen. Ich weiß nicht, ob Sie wollte. Ich beschränkte es auf zwei Dezimalstellen, aber es kann eingestellt werden, was auch immer.