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

Ich habe eine Direktive in Angular erstellt, um sicherzustellen, dass kein '-' eingegeben wird.

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appPositiveNumber]'
})
export class PositiveNumberDirective {
  private regex = new RegExp(/^\d*[.,]?\d*$/g);
  private specialKeys: Array = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];

  constructor(private el: ElementRef) { }

  @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
    if (!event.key.match(this.regex) && !this.specialKeys.includes(event.key)) {
      event.preventDefault();
      return;
    }
  }
}

Daher können Sie es wie folgt auf dem Element hinzufügen:

Answer 2

Probieren Sie diese Optionen aus und geben Sie min und max ein

Answer 3

Ich habe diese Lösung hinzugefügt, weil sie Zeit für die Leute sparen wird

\=48 && event.charCode<=57 || event.charCode==46) min=“0” >

Der obige Code wird das Eingeben von negativen Werten und dem Buchstaben e einschränken. In der obigen Zeile erlauben wir einen Punkt, falls du das nicht brauchst, kannst du den OR-Bedingungscode entfernen (|| event.charCode==46)

Answer 4

Verwenden Sie dies.

onkeypress="return (event.charCode >= 48 && event.charCode <= 57 || event.charCode == 46)" 

Sie können ganze Zahlen und Dezimalzahlen eingeben.

Answer 5

Fügen Sie diesen Code in Ihren Input-Typ ein;

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

Zum Beispiel: