Gibt es eine Möglichkeit zu verhindern, dass input type="number" negative Werte erhält?

Question

Ich möchte nur positive Werte erhalten. Gibt es eine Möglichkeit, dies zu verhindern, indem ich nur html
Bitte schlagen Sie keine Validierungsmethode vor

Answer 1

Ich wollte Dezimalzahlen zulassen und nicht die gesamte Eingabe löschen, wenn eine negative Zahl eingegeben wird. Dies funktioniert zumindest in Chrome gut:

<input type="number" min="0" onkeypress="return event.charCode != 45">

Answer 2

Die Antwort von @Manwal ist gut, aber ich mag Code mit weniger Codezeilen für eine bessere Lesbarkeit. Auch ich mag die Verwendung von onclick/onkeypress in html statt.

Meine vorgeschlagene Lösung tut dasselbe: hinzufügen.

min="0" onkeypress="return isNumberKey(event)"

in die html-Eingabe und

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

als Javascript-Funktion.

Wie gesagt, es tut dasselbe. Es ist nur persönliche Vorliebe auf, wie das Problem zu lösen.

Answer 3

Hier ist eine Angular-2-Lösung:

eine Klasse OnlyNumber erstellen

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

@Directive({
  selector: '[OnlyNumber]'
})
export class OnlyNumber {

  // Allow decimal numbers. The \. is only allowed once to occur
  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

  // Allow key codes for special events. Reflect :
  // Backspace, tab, end, home
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];

  constructor(private el: ElementRef) {
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    // Do not use event.keycode this is deprecated.
    // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
    let current: string = this.el.nativeElement.value;
    // We need this because the current value on the DOM element
    // is not yet updated with the value from this event
    let next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

Fügen Sie OnlyNumber zu den Deklarationen in app.module.ts hinzu und verwenden Sie es wie folgt überall in Ihrer Anwendung

<input OnlyNumber="true">

Answer 4

Nur als Hinweis: Mit jQuery können Sie negative Werte bei focusout mit dem folgenden Code überschreiben:

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

Dies ersetzt nicht die serverseitige Validierung!

Answer 5

Einfach min="0" verwenden

<v-text-field
   v-model="abc"
   class="ml-1 rounded-0"
   outlined
   dense
   label="Number"
   type="number"
   min="0">
</v-text-field>