Comment faire de type = "nombre" uniquement des nombres positifs

actuellement j'ai le code suivant

<input type="number" />

il ressort de quelque chose comme ça

Les petits éléments de sélection à droite permettent au nombre de devenir négatif. Comment puis-je empêcher cela?

J'ai des doutes sur l'utilisation type="number", cela cause plus de problèmes que ça ne résout, je vais quand même le vérifier, alors devrais-je simplement recommencer à utiliser type="text"?

Ajouter un minattribut

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

J'ai trouvé une autre solution pour éviter un nombre négatif.

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

Cela dépend de la précision que vous souhaitez être. Si vous souhaitez n'accepter que des entiers, alors:

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

Si vous voulez des flottants avec, par exemple, deux chiffres après le point décimal:

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

Vous pouvez forcer l'entrée à contenir uniquement un entier positif en ajoutant onkeypress dans la inputbalise.

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

Ici, event.charCode >= 48 garantit que seuls les nombres supérieurs ou égaux à 0 sont renvoyés, tandis que la minbalise garantit que vous pouvez atteindre un minimum de 1 en faisant défiler la barre de saisie.

Vous pouvez utiliser ce qui suit pour type="number"accepter uniquement les nombres positifs:

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

Vous pouvez empêcher la saisie négative dans un formulaire de saisie de nombres de la manière suivante:

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

Essayer

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

Si vous avez besoin de saisie de texte , le modèle fonctionne également

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

Je ne trouve pas la solution parfaite car certains travaux pour la saisie mais pas pour le copier-coller, certains sont l'inverse. Cette solution fonctionne pour moi. Il empêche de nombre négatif, en tapant "e", copier et coller du texte "e".

créer une fonction.

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

ajoutez ces propriétés à l'entrée. ces deux empêchent de copier et coller du texte non numérique, y compris "e". vous devez avoir les deux ensemble pour prendre effet.

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

Si vous utilisez Vue, vous pouvez consulter cette réponse ici . Je l'ai extrait dans un mixin qui peut être réutilisé.

ajoutez ce code dans votre type d'entrée;

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

par exemple:

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

Une autre solution consiste à utiliser Js pour le rendre positif (l'option min peut être désactivée et n'est pas valide lorsque l'utilisateur tape smth) L'événement négatif si n'est pas nécessaire et on ('keydown') peut également être utilisé!

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

Cela dépend si vous voulez un champ int ou float. Voici à quoi ressembleraient les deux:

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

Le champ int a la validation correcte qui lui est attachée, puisque son min est 1. Le champ float accepte 0, cependant; pour y faire face, vous pouvez ajouter un validateur de contrainte supplémentaire :

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

Notez qu'aucune de ces solutions n'empêche complètement l'utilisateur d'essayer de taper une entrée non valide, mais vous pouvez appeler checkValidityoureportValidity déterminer si l'utilisateur a tapé une entrée valide.

Bien sûr, vous devriez toujours avoir une validation côté serveur car l'utilisateur peut toujours ignorer la validation côté client.

Essaye ça:

• Testé en angulaire 8
• les valeurs sont positives
• Ce code gère également nullet negitivevaleurs.

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

Si vous essayez d'entrer un nombre négatif, l'événement onkeyup bloque cela et si vous utilisez la flèche sur le numéro d'entrée, l'événement onblur résout cette partie.

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

Avec le type d'entrée de texte, vous pouvez l'utiliser pour une meilleure validation,

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

Essaye ça:

Yii2 : Validation rule 

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