Existe-t-il un moyen d'empêcher le type d'entrée = «nombre» d'obtenir des valeurs négatives?

Je veux obtenir uniquement des valeurs positives, existe-t-il un moyen de l'empêcher d'utiliser uniquement du HTML
Veuillez ne pas suggérer de méthode de validation

Utilisez l' minattribut comme ceci:

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

Je n'étais pas satisfait de la réponse @Abhrabm car:

Cela empêchait uniquement la saisie de nombres négatifs à partir des flèches haut / bas, tandis que l'utilisateur pouvait taper un nombre négatif à partir du clavier.

La solution consiste à éviter avec le code clé :

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

Précision fournie par @Hugh Guiney :

Quels codes clés sont vérifiés:

• 95, <106 correspond au pavé numérique 0 à 9;
• 47, <58 correspond à 0 à 9 sur la ligne numérique; et 8 est Backspace.

Ce script empêche donc la saisie d'une clé non valide en entrée.

Pour moi, la solution était:

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

Ce code fonctionne bien pour moi. Peux tu vérifier s'il te plaît:

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

Méthode simple:

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

Je voulais autoriser les nombres décimaux et ne pas effacer la totalité de l'entrée si un négatif était entré. Cela fonctionne bien en chrome au moins:

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

La réponse @Manwal est bonne, mais j'aime le code avec moins de lignes de code pour une meilleure lisibilité. J'aime aussi utiliser à la place l'utilisation onclick / onkeypress en html.

Ma solution suggérée fait de même: Ajouter

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

à l'entrée html et

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

comme une fonction javascript.

Comme je l'ai dit, il fait de même. C'est juste une préférence personnelle sur la façon de résoudre le problème.

Juste pour référence: avec jQuery vous pouvez écraser les valeurs négatives sur focusout avec le code suivant:

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

Cela ne remplace pas la validation côté serveur!

Voici une solution angulaire 2:

créer une classe 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();
    }
  }
}

ajoutez OnlyNumber aux déclarations dans app.module.ts et utilisez comme ça n'importe où dans votre application

<input OnlyNumber="true">

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

Ajouter simplement une autre façon de faire cela (en utilisant Angular) si vous ne voulez pas salir le HTML avec encore plus de code:

Il vous suffit de vous abonner au champ valueChanges et de définir la valeur comme une valeur absolue (en prenant soin de ne pas émettre un nouvel événement car cela provoquera un autre valueChange donc un appel récursif et déclenchera une erreur Taille d'appel maximale dépassée)

CODE HTML

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

CODE TypeScript (à l'intérieur de votre composant)

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'];
}

La réponse à cela n'est pas utile. car cela ne fonctionne que lorsque vous utilisez les touches haut / bas, mais si vous tapez -11, cela ne fonctionnera pas. Voici donc un petit correctif que j'utilise

celui-ci pour les entiers

  $(".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();
    }
   });

celui-ci quand vous avez des numéros de prix

        $(".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();
    }
   });

Cette solution permet toutes les fonctionnalités du clavier, y compris copier-coller avec le clavier. Il empêche le collage de nombres négatifs avec la souris. Il fonctionne avec tous les navigateurs et la démo sur codepen utilise bootstrap et jQuery. Cela devrait fonctionner avec des paramètres et des claviers non anglais. Si le navigateur ne prend pas en charge la capture d'événement de collage (IE), il supprimera le signe négatif après la mise au point. Cette solution se comporte comme le navigateur natif devrait le faire avec min = 0 type = nombre.

Balisage:

<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;
    }
  });
});

Voici une solution qui a fonctionné le mieux pour moi pour un champ QTY qui n'autorise que les chiffres.

// 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;
    }