Gibt es eine Möglichkeit zu verhindern, dass der Eingabetyp = "Zahl" negative Werte erhält?

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

Verwenden Sie das minAttribut wie folgt:

<input type="number" min="0">

Ich war mit der Antwort von @Abhrabm nicht zufrieden , weil:

Es wurde nur verhindert, dass negative Zahlen über Aufwärts- / Abwärtspfeile eingegeben werden, während Benutzer negative Zahlen über die Tastatur eingeben können.

Die Lösung besteht darin, mit Schlüsselcode zu verhindern :

// Select your input element.
var number = document.getElementById('number');

// Listen for input event on numInput.
number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}

<form action="" method="post">
  <input type="number" id="number" min="0" />
  <input type="submit" value="Click me!"/>
</form>

Klarstellung von @Hugh Guiney :

Welche Schlüsselcodes werden überprüft:

• 95, <106 entspricht Numpad 0 bis 9;
• 47, <58 entspricht 0 bis 9 in der Zahlenreihe; und 8 ist Rücktaste.

Dieses Skript verhindert also, dass ungültige Schlüssel in die Eingabe eingegeben werden.

Für mich war die Lösung:

<input type="number" min="0" oninput="this.value = Math.abs(this.value)">

Dieser Code funktioniert gut für mich. Können Sie es bitte überprüfen:

<input type="number" name="test" min="0" oninput="validity.valid||(value='');">

Einfache Methode:

<input min='0' type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57">

Ich wollte Dezimalzahlen zulassen und nicht die gesamte Eingabe löschen, wenn ein Negativ eingegeben wurde. Dies funktioniert zumindest in Chrom gut:

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

Die @ Mandal-Antwort ist gut, aber ich mag Code mit weniger Codezeilen für eine bessere Lesbarkeit. Außerdem verwende ich stattdessen gerne die Verwendung von onclick / onkeypress in HTML.

Meine vorgeschlagene Lösung macht dasselbe: Hinzufügen

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

zur 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 macht das gleiche. Es ist nur eine persönliche Präferenz, wie das Problem gelöst werden soll.

Nur als Referenz: Mit jQuery können Sie negative Werte auf 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!

Hier ist eine Winkel-2-Lösung:

Erstellen Sie eine Klasse OnlyNumber

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 Deklarationen in app.module.ts hinzu und verwenden Sie es so überall in Ihrer App

<input OnlyNumber="true">

oninput="this.value=(this.value   < Number(this.min) || this.value   > Number(this.max))  ? '' : this.value;"

Fügen Sie einfach eine andere Möglichkeit hinzu (mit Angular), wenn Sie den HTML-Code nicht mit noch mehr Code verschmutzen möchten:

Sie müssen nur das Feld valueChanges abonnieren und den Wert als absoluten Wert festlegen.

HTML QUELLTEXT

<form [formGroup]="myForm">
    <input type="number" formControlName="myInput"/>
</form>

TypeScript CODE (in Ihrer Komponente)

formGroup: FormGroup;

ngOnInit() { 
    this.myInput.valueChanges 
    .subscribe(() => {
        this.myInput.setValue(Math.abs(this.myInput.value), {emitEvent: false});
    });
}

get myInput(): AbstractControl {
    return this.myForm.controls['myInput'];
}

Die Antwort darauf ist nicht hilfreich. da es nur funktioniert, wenn Sie Auf- / Ab-Tasten verwenden, aber wenn Sie -11 eingeben, funktioniert es nicht. Also hier ist ein kleiner Fix, den ich benutze

dieser für ganze Zahlen

  $(".integer").live("keypress keyup", function (event) {
    //    console.log('int = '+$(this).val());
    $(this).val($(this).val().replace(/[^\d].+/, ""));
    if (event.which != 8 && (event.which < 48 || event.which > 57))
    {
        event.preventDefault();
    }
   });

Dieser, wenn Sie Preisnummern haben

        $(".numeric, .price").live("keypress keyup", function (event) {
     //    console.log('numeric = '+$(this).val());
    $(this).val($(this).val().replace(/[^0-9\,\.]/g, ''));

    if (event.which != 8 && (event.which != 44 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
    }
   });

Diese Lösung ermöglicht alle Tastaturfunktionen, einschließlich Kopieren und Einfügen mit der Tastatur. Es verhindert das Einfügen negativer Zahlen mit der Maus. Es funktioniert mit allen Browsern und der Demo auf Codepen verwendet Bootstrap und jQuery. Dies sollte mit nicht englischen Spracheinstellungen und Tastaturen funktionieren. Wenn der Browser die Erfassung von Einfügeereignissen (IE) nicht unterstützt, wird das negative Vorzeichen nach dem Ausschalten entfernt. Diese Lösung verhält sich wie der native Browser mit min = 0 type = number.

Markup:

<form>
  <input class="form-control positive-numeric-only" id="id-blah1" min="0" name="nm1" type="number" value="0" />
  <input class="form-control positive-numeric-only" id="id-blah2" min="0" name="nm2" type="number" value="0" />
</form>

Javascript

$(document).ready(function() {
  $("input.positive-numeric-only").on("keydown", function(e) {
    var char = e.originalEvent.key.replace(/[^0-9^.^,]/, "");
    if (char.length == 0 && !(e.originalEvent.ctrlKey || e.originalEvent.metaKey)) {
      e.preventDefault();
    }
  });

  $("input.positive-numeric-only").bind("paste", function(e) {
    var numbers = e.originalEvent.clipboardData
      .getData("text")
      .replace(/[^0-9^.^,]/g, "");
    e.preventDefault();
    var the_val = parseFloat(numbers);
    if (the_val > 0) {
      $(this).val(the_val.toFixed(2));
    }
  });

  $("input.positive-numeric-only").focusout(function(e) {
    if (!isNaN(this.value) && this.value.length != 0) {
      this.value = Math.abs(parseFloat(this.value)).toFixed(2);
    } else {
      this.value = 0;
    }
  });
});

Hier ist eine Lösung, die für ein QTY-Feld, das nur Zahlen zulässt, am besten funktioniert hat.

// Only allow numbers, backspace and left/right direction on QTY input
    if(!((e.keyCode > 95 && e.keyCode < 106) // numpad numbers
        || (e.keyCode > 47 && e.keyCode < 58) // numbers
        || [8, 9, 35, 36, 37, 39].indexOf(e.keyCode) >= 0 // backspace, tab, home, end, left arrow, right arrow
        || (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + A
        || (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + C
        || (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + X
        || (e.keyCode == 86 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + V
    )) {
        return false;
    }