Y a-t-il un moyen d’empêcher le type d’entrée = “nombre” d’obtenir des valeurs négatives?

Je veux obtenir seulement des valeurs positives, y a-t-il un moyen de l’empêcher en utilisant seulement le HTML
Merci de ne pas suggérer une méthode de validation

Capture d'écran du contrôle d'entrée

Utilisez l’ atsortingbut min comme ceci:

  

Je n’étais pas satisfait de la réponse de @Ahbrabm parce que:

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

La solution est de prévenir 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; } } 
 

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

  

Pour moi, la solution était:

  

Méthode facile:

  

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

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

en tant que fonction javascript.

Comme dit, cela fait la même chose. C’est juste la 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 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 = ['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: ssortingng = 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: ssortingng = current.concat(event.key); if (next && !Ssortingng(next).match(this.regex)) { event.preventDefault(); } } } 

Ajouter OnlyNumber aux déclarations dans app.module.ts et l’utiliser comme ça n’importe où dans votre application

  
  

Cette solution permet 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. Il fonctionne avec tous les navigateurs et la démo sur codepen utilise bootstrap et jQuery. Cela devrait fonctionner avec les parameters de langue et les claviers non anglais. Si le navigateur ne prend pas en charge la capture d’événement de collage (IE), il supprime le signe négatif après la sortie du focus. Cette solution se comporte comme le navigateur natif devrait avec min = 0 type = numéro.

Balisage:

 

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; } }); }); 
 oninput="this.value=(this.value < Number(this.min) || this.value > Number(this.max)) ? '' : this.value;" 

Voici une solution qui a le mieux fonctionné pour un champ QTY qui n’autorise que les 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; }