web-dev-qa-db-fra.com

Est-il possible d'empêcher l'entrée type = "nombre" d'obtenir des valeurs négatives?

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

Screenshot of input control

htmlinputnumbers
254
Tural Ali

Utilisez le min attribut comme ceci:

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

Je n'étais pas satisfait de @ Abhrabm answer car:

Cela empêchait seulement les nombres négatifs d'être entrés à partir des flèches haut/bas, alors que l'utilisateur pouvait taper un nombre négatif à partir du clavier.

La solution est d’empêcher 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>

Clarification fournie par @ Hugh Guiney :

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

  • 95, <106 correspond aux pavés numériques 0 à 9;
  • 47, <58 correspond à 0 à 9 sur la rangée de numéros; et 8 est Backspace.

Donc, ce script empêche la saisie d'une clé non valide.

108
Manwal

Pour moi, la solution était:

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

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='');">
26
Chinmay235

Méthode facile:

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

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

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

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

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

5
Hafenkranich

La réponse @Manwal est bonne, mais j'aime le code avec moins de lignes de code pour une meilleure lisibilité. Aussi, j'aime utiliser onclick/onkeypress en HTML.

Ma solution suggérée fait la même chose: 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 dit, c'est pareil. C'est juste une préférence personnelle sur la façon de résoudre le problème.

5
Chris H.

Voici une solution angular 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-le comme ceci n'importe où dans votre application

<input OnlyNumber="true">
3
HeisenBerg

vous devriez utiliser l'attribut min en entrée

<input type='number' min='0'/>
2
Ehsan
<input type="number" name="credit_days" pattern="[^\-]+" 
    #credit_days="ngModel" class="form-control" 
    placeholder="{{ 'Enter credit days' | translate }}" min="0" 
    [(ngModel)]="provider.credit_days"
    onkeypress="return (event.charCode == 8 || event.charCode == 0 || 
    event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 
    57" onpaste="return false">
1
Hui Lin
oninput="this.value=(this.value   < Number(this.min) || this.value   > Number(this.max))  ? '' : this.value;"
1
user9276950

Voici une solution qui a fonctionné le mieux de moi pour un champ QTY qui ne permet que des nombres.

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

Cette solution autorise toutes les fonctionnalités du clavier, y compris le copier-coller avec le clavier. Il empêche le collage de nombres négatifs avec la souris. Cela fonctionne avec tous les navigateurs et la démo sur codepen utilise bootstrap et jQuery. Cela devrait fonctionner avec des paramètres de langue autre que l'anglais et des claviers. Si le navigateur ne prend pas en charge la capture d’événement coller (IE), il supprimera le signe négatif après la mise au point. Cette solution se comporte comme le navigateur natif devrait 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;
    }
  });
});
0
wilsotc

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

Vous devez seulement vous abonner au champ valueChanges et définir la valeur en tant que valeur absolue (en prenant soin de ne pas émettre de nouvel événement car cela entraînera une autre valeurChange, d'où un appel récursif et déclenchera un dépassement de la taille maximale de l'appel Erreur)

HTML CODE 

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

TypeScript CODE (Dans 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'];
}
0
Pedro B.