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

Sie können das folgende verwenden, um type="number" nur positive Zahlen zuzulassen:

Answer 2

Wenn Sie versuchen, eine negative Zahl einzugeben, blockiert das onkeyup-Ereignis dies, und wenn Sie den Pfeil auf der Eingabenummer verwenden, löst das onblur-Ereignis diesen Teil.

Answer 3

Ich kann keine perfekte Lösung finden, da einige für die Eingabe funktionieren, aber nicht für das Kopieren und Einfügen, andere sind genau umgekehrt. Diese Lösung funktioniert für mich. Es verhindert negative Zahlen, das Tippen von "e", das Kopieren und Einfügen von "e" Text.

Erstellen Sie eine Funktion.

  // Das verhindert das Tippen von Nichtnumerische Texte, einschließlich "e".
  function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    let charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
      evt.preventDefault();
    } else {
      return true;
    }
  }

Fügen Sie diese Eigenschaften zu dem Input hinzu. Diese beiden verhindern das Kopieren und Einfügen von Nichtnumerische Texte, einschließlich "e". Beide müssen zusammen verwendet werden, um Wirkung zu zeigen.

Wenn Sie Vue verwenden, können Sie sich hier auf diese Antwort beziehen. Ich habe es in ein Mixin extrahiert, das wiederverwendet werden kann.

Answer 4

Diese Lösung mag etwas überflüssig erscheinen, kümmert sich aber um jeden Aspekt.

Im Formular verwenden Sie dies

und definieren Sie in der .ts die Funktion

onlyDigits(event) {
   let code = event.charCode;
   return (code >= 48 && code <= 57);
}

Dies stellt sicher, dass nur positive Zahlen mit den Pfeiltasten eingegeben werden können. Es verhindert auch das Tippen von Nicht-Ziffern (einschließlich '-', '+' und 'e')

Answer 5

Das Problem mit type="number" und min="1" ist, dass es erlaubt, das Zeichen -, das Zeichen e und das Zeichen + zu tippen oder einzufügen.

Das Problem mit Math.abs(value) ist, dass es die gesamte eingegebene Zahl durch 0 ersetzt, was wir nicht wollen und sehr frustrierend ist.

Das e.keyCode ist sehr schwer lesbar und veraltet.

Die reine HTML-Methode funktioniert in diesem Fall nicht, du musst JavaScript verwenden.

Entferne den type="number" und mache dies:

function inputNumberAbs() {
  var input = document.getElementsByTagName("input")[0];
  var val = input.value;
  val = val.replace(/^0+|[^\d.]/g, '');
  input.value = val;
}

Regex-Erklärung:

^0+ entfernt alle 0er am Anfang

| Oder-Operator

[^\d.] entfernt alles, was ^(NICHT) eine \d(ZAHL) oder ein .(PUNKT) ist

Dies verhindert, dass der Benutzer irgendwelche nicht definierten Zeichen wie e, -, +, und alle anderen Zeichen, die keine Zahlen sind, eingibt oder einfügt.

Wenn du keine Dezimalzahlen benötigst, entferne einfach den . aus dem Regex.