So machen Sie type = "number" nur zu positiven Zahlen

Derzeit habe ich den folgenden Code

<input type="number" />

es kommt zu so etwas heraus

Die kleinen Auswahlelemente auf der rechten Seite lassen die Zahl negativ werden. Wie verhindere ich das?

Ich habe Zweifel an der Verwendung type="number", es verursacht mehr Probleme als es löst, ich werde es trotzdem auf geistige Gesundheit überprüfen, also sollte ich einfach wieder verwenden type="text"?

Fügen Sie ein minAttribut hinzu

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

Ich habe eine andere Lösung gefunden, um eine negative Zahl zu verhindern.

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

Es hängt davon ab, wie genau Sie sein möchten. Wenn Sie nur ganze Zahlen akzeptieren möchten, als:

<input type="number" min="1" step="1">

Wenn Sie Floats mit beispielsweise zwei Nachkommastellen wünschen:

<input type="number" min="0.01" step="0.01">

Sie können erzwingen, dass die Eingabe nur eine positive Ganzzahl enthält, indem Sie sie onkeypressinnerhalb des inputTags hinzufügen .

<input type="number" onkeypress="return event.charCode >= 48" min="1" >

Hier wird event.charCode >= 48sichergestellt, dass nur Zahlen größer oder gleich 0 zurückgegeben werden, während das minTag sicherstellt, dass Sie durch Scrollen in der Eingabeleiste ein Minimum von 1 erreichen können.

Sie können Folgendes verwenden, um type="number"nur positive Zahlen zu akzeptieren:

input type="number" step="1" pattern="\d+"

Sie können eine negative Eingabe in einem Zahleneingabeformular folgendermaßen verhindern:

<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">

Versuchen

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

Wenn Sie einen Text eingeben müssen, funktioniert das Muster auch

<input type="text" pattern="\d+">

Ich kann nicht die perfekte Lösung finden, da einige Arbeiten zum Eingeben, aber nicht zum Kopieren und Einfügen verwendet werden. Einige sind umgekehrt. Diese Lösung funktioniert bei mir. Es verhindert negative Zahlen, indem Sie "e" eingeben, "e" kopieren und einfügen.

eine Funktion erstellen.

<script language="JavaScript">

  // this prevents from typing non-number text, including "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;
    }
  }
</script>

Fügen Sie diese Eigenschaften zur Eingabe hinzu. Diese beiden verhindern das Kopieren und Einfügen von nicht nummeriertem Text, einschließlich "e". Sie müssen beide zusammen haben, um wirksam zu werden.

<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />

Wenn Sie Vue verwenden , können Sie diese Antwort hier verweisen . Ich habe es zu einem Mixin extrahiert, das wiederverwendet werden kann.

Fügen Sie diesen Code in Ihren Eingabetyp ein.

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

beispielsweise:

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

Eine andere Lösung besteht darin, Js zu verwenden, um es positiv zu machen (die Option min kann deaktiviert werden und ist nicht gültig, wenn der Benutzer smth eingibt). Das negative Ereignis if ist nicht erforderlich und on ('keydown') kann ebenfalls verwendet werden!

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

Dies hängt davon ab, ob Sie ein int- oder ein float-Feld möchten. So würden die beiden aussehen:

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

Dem int-Feld ist die korrekte Validierung zugeordnet, da seine min 1 ist. Das float-Feld akzeptiert jedoch 0; Um dies zu beheben, können Sie einen weiteren Einschränkungsvalidator hinzufügen :

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

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

JSFiddle hier.

Beachten Sie, dass keine dieser Lösungen den Benutzer vollständig daran hindert, ungültige Eingaben einzugeben. Sie können jedoch anrufen checkValidityoderreportValidity herausfinden, ob der Benutzer gültige Eingaben eingegeben hat.

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

Versuche dies:

• Getestet in Winkel 8
• Werte sind positiv
• Dieser Code behandelt auch Werte nullund negitiveWerte.

              <input
                type="number"
                min="0"
                (input)="funcCall()" -- Optional
                oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
                formControlName="RateQty"
                [(value)]="some.variable" -- Optional
              />

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

<input type="number" 
    onkeyup="if(this.value<0)this.value=1"
    onblur="if(this.value<0)this.value=1"
>

Mit der Texteingabe können Sie diese für eine bessere Validierung verwenden.

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();

Versuche dies:

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}