Come rendere type = "number" solo per numeri positivi

attualmente ho il seguente codice

<input type="number" />

viene fuori a qualcosa del genere

Le piccole cose di selezione sulla destra consentono al numero di andare in negativo. Come posso impedirlo?

Ho dei dubbi sull'utilizzo type="number", sta causando più problemi di quanti ne risolva, vado comunque a controllare la sanità mentale, quindi dovrei semplicemente tornare a usare type="text"?

Aggiungi un minattributo

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

Ho trovato un'altra soluzione per prevenire il numero negativo.

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

Dipende da quanto preciso vuoi essere. Si desidera accettare solo numeri interi, quindi:

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

Se vuoi float con, ad esempio, due cifre dopo il punto decimale:

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

Puoi forzare l'input a contenere solo numeri interi positivi aggiungendo onkeypressall'interno del inputtag.

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

Qui, event.charCode >= 48garantisce che vengano restituiti solo numeri maggiori o uguali a 0, mentre il mintag assicura che è possibile arrivare a un minimo di 1 scorrendo all'interno della barra di input.

È possibile utilizzare quanto segue per type="number"accettare solo numeri positivi:

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

È possibile impedire l'input negativo in un modulo di input numerico nel modo seguente:

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

Provare

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

Se è necessario inserire il testo , anche il modello funziona

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

Non riesco a trovare la soluzione perfetta poiché alcuni lavorano per l'inserimento ma non per il copia e incolla, altri sono il contrario. Questa soluzione funziona per me. Impedisce il numero negativo, digitando "e", copia e incolla il testo "e".

creare una funzione.

<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>

aggiungi queste proprietà all'input. questi due impediscono di copiare e incollare testo non numerico, incluso "e". devi avere entrambi insieme per avere effetto.

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

Se stai usando Vue puoi fare riferimento a questa risposta qui . L'ho estratto in un mixin che può essere riutilizzato.

aggiungi questo codice nel tuo tipo di input;

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

per esempio:

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

Un'altra soluzione è usare Js per renderlo positivo (l'opzione min può essere disabilitata e non è valida quando l'utente digita smth) L'evento negativo se non è necessario e attivo ('keydown') può anche essere usato!

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

Dipende se si desidera un campo int o float. Ecco come sarebbero i due:

<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">

Al campo int è associata la corretta convalida, poiché il suo minimo è 1. Il campo float accetta 0, tuttavia; per risolvere questo problema, puoi aggiungere un altro validatore di vincoli :

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 qui.

Si noti che nessuna di queste soluzioni impedisce completamente all'utente di provare a digitare un input non valido, ma è possibile chiamare checkValidityoreportValidity capire se l'utente ha digitato un input valido.

Ovviamente, dovresti comunque avere la convalida sul lato server perché l'utente può sempre ignorare la convalida sul lato client.

Prova questo:

• Testato in Angolare 8
• i valori sono positivi
• Questo codice gestisce anche valori nulle negitivevalori.

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

Se si tenta di inserire un numero negativo, l'evento onkeyup lo blocca e se si utilizza la freccia sul numero di input, l'evento onblur risolve quella parte.

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

Con il tipo di input di testo puoi utilizzarlo per una migliore convalida,

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

Prova questo:

Yii2 : Validation rule 

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