Wie man type="number" auf positive Zahlen beschränkt

Question

Derzeit habe ich den folgenden Code

es kommt so etwas heraus

Die kleinen Auswahlpfeile rechts erlauben es, negative Zahlen einzugeben. Wie kann ich das verhindern?

Ich habe Zweifel, ob ich type="number" verwenden soll, es verursacht mehr Probleme, als es löst. Ich werde es trotzdem überprüfen, sollte ich einfach wieder zu type="text" zurückkehren?

Answer 1

Wenn Text eingefügt werden muss, funktioniert das Muster auch

Answer 2

Versuchen Sie dies:

• Getestet in Angular 8
• Werte sind positiv
• Dieser Code handhabt auch null und negitive Werte.

Answer 3

Andere Lösung ist es, Js zu verwenden, um es positiv zu machen (Mindestoption kann deaktiviert werden und ist ungültig, wenn der Benutzer etwas eingibt) Das negative if ist nicht erforderlich und das on('keydown') Ereignis kann auch verwendet werden!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});

Answer 4

Es hängt davon ab, ob Sie ein int- oder float-Feld wünschen. So würden die beiden aussehen:

Dem int-Feld ist die korrekte Validierung zugeordnet, da sein min 1 ist. Das Gleitkommazahlenfeld akzeptiert 0, um damit umzugehen, können Sie einen weiteren Constraint-Validator hinzufügen:

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Bitte geben Sie einen Wert größer als 0 ein.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

JSFiddle hier.

Beachten Sie, dass keines dieser Lösungen den Benutzer vollständig davon abhält, ungültige Eingaben zu versuchen, aber Sie können checkValidity oder reportValidity aufrufen, um festzustellen, ob der Benutzer gültige Eingaben eingegeben hat.

Natürlich sollten Sie weiterhin eine serverseitige Validierung haben, da der Benutzer die clientseitige Validierung immer ignorieren kann.

Answer 5

Ich denke, dass die Verwendung von type text besser ist als die Verwendung von number, weil man bei der Verwendung von type=number auf Probleme stoßen wird, wie z.B. Pfeiltasten im Eingabefeld und Wertänderung bei Drücken der Auf- und Ab-Taste.

---