it-swarm.com.de

Negative Eingaben in Formulareingabetyp = "Zahl" verhindern

Ich möchte die Benutzereingaben auf positive Zahlen in einem HTML-Formular beschränken. 

Ich weiß, dass Sie min = "0" einstellen können, dies kann jedoch durch manuelle Eingabe einer negativen Zahl umgangen werden. 

Gibt es eine andere Möglichkeit, dieses Problem zu lösen, ohne eine Validierungsfunktion zu schreiben?

28
Ali

Dies verwendet Javascript, aber Sie müssen keine eigene Validierungsroutine schreiben. Überprüfen Sie stattdessen einfach die validity.valid-Eigenschaft. Dies gilt nur dann, wenn die Eingabe innerhalb des Bereichs liegt.

<html>
<body>
<form action="#">
  <input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

59
Mikel Rychliski

Dies ist nicht möglich, ohne den Wert der Eingabe zu bestätigen.

Eingabetyp = Nummer

Das Eingabeelement mit einem Typattribut, dessen Wert "number" ist, stellt ein genaues Steuerelement dar, um den Wert des Elements auf einen string zu setzen, der eine Zahl darstellt.

Da es sich um eine Zeichenfolge handelt, die die Zahl darstellt, gibt es keine Möglichkeit sicherzustellen, dass Zeichenfolge numerische Werte darstellt oder nicht.

Die zulässigen Attribute geben Ihnen nicht die Möglichkeit, den Wert des Zahleneingabesteuerelements zu überprüfen.

Eine Möglichkeit, dies mit Hilfe von JavaScript zu tun, könnte so aussehen.

// Select your input element.
var numInput = document.querySelector('input');

// Listen for input event on numInput.
numInput.addEventListener('input', function(){
    // Let's match only digits.
    var num = this.value.match(/^\d+$/);
    if (num === null) {
        // If we have no match, value will be empty.
        this.value = "";
    }
}, false)
<input type="number" min="0" />

Wenn Sie vorhaben, Ihre Daten an einen Server zu senden, stellen Sie sicher, dass auch die Daten auf dem Server überprüft werden. Client-Seite JavaScript kann nicht sicherstellen, dass die gesendeten Daten Ihren Erwartungen entsprechen.

28
DavidDomain

Wenn Sie den Standardwert, d. H. Den Mindestwert oder einen anderen Wert sicherstellen möchten, ist dies eine funktionierende Lösung. Dies verhindert auch das Löschen des Eingabefelds. Genauso können Sie auch den Maximalwert einstellen.

<input type="number" min="1" max="9999" maxlength="4" oninput="this.value=this.value.slice(0,this.maxLength||1/1);this.value=(this.value   < 1) ? (1/1) : this.value;">
3
user7135197

type="number" löst bereits, dass nur Zahlen eingegeben werden können, wie die anderen Antworten hier zeigen.

Nur zur Information: Mit jQuery können Sie negative Werte in focusout mit folgendem Code überschreiben:

$(document).ready(function(){
    $("body").delegate('#myInputNumber', 'focusout', function(){
        if($(this).val() < 0){
            $(this).val('0');
        }
    });
});

Dies ersetzt nicht die serverseitige Validierung!

1
Hafenkranich

Im folgenden Skript können nur Zahlen oder ein Rückschritt in die Eingabe eingegeben werden.

var number = document.getElementById('number');

number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}
<input type="number" id="number" min="0">

1
Tiny Giant