J'ai le code suivant d'une autre question ici sur la façon d'empêcher les utilisateurs d'entrer des nombres négatifs, mais il couvre toutes les entrées. J'ai 2 éléments d'entrée de type number et 2 éléments d'entrée de type text. Je veux évidemment permettre à l'utilisateur d'ajouter n'importe quel caractère aux champs de texte, mais je veux empêcher les utilisateurs d'entrer des nombres négatifs / non numériques dans les entrées number.

Mon code ci-dessous fonctionne pour une entrée avec le type number et pas l'autre. Comment pourrais-je changer mon code pour le permettre pour l'autre entrée number? Toute aide serait grandement appréciée.

HTML

<div class="cpNewTemplateDetailsWrap">
    <div class="col-sm-3">
        <label>Course Id</label>
    </div>
    <div class="col-sm-9">
        <input id="courseIdInput" type="text" class="form-control input-lg" placeholder="e.g. CT001" />
    </div>
    <div class="col-sm-3">
        <label>Course Description</label>
    </div>
    <div class="col-sm-9">
        <input id="courseDescInput" type="text" class="form-control input-lg" placeholder="e.g. Cadet Training" />
    </div>
    <div class="col-sm-3">
        <label>Course Duration <small>(Days)</small>
        </label>
    </div>
    <div class="col-sm-9">
        <input id="courseDurationInput" type="number" min="0" class="form-control input-lg" placeholder="5" />
    </div>
    <div class="col-sm-3" id="courseDemandTitle">
        <label>Course Demand</label>
    </div>
    <div class="col-sm-9">
        <input id="courseDemandInput" type="number" min="0" class="form-control input-lg" placeholder="5" />
    </div>
</div>

Javascript

var myInput = document.querySelectorAll("input[type=number]")[0];
myInput.addEventListener('keypress', function(e) {
  var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
  function keyAllowed() {
    var keys = [8,9,13,16,17,18,19,20,27,46,48,49,50,
                51,52,53,54,55,56,57,91,92,93];
    if (key && keys.indexOf(key) === -1)
      return false;
    else
      return true;
  }
  if (!keyAllowed())
    e.preventDefault();
}, false);

// Disable pasting of non-numbers
myInput.addEventListener('paste', function(e) {
  var pasteData = e.clipboardData.getData('text/plain');
  if (pasteData.match(/[^0-9]/))
    e.preventDefault();
}, false);

JS Fiddle Here!

Éditer

Avec certaines des questions en double, elles couvrent une seule entrée ou toutes les entrées. Je veux juste éviter les nombres négatifs de 2 entrées. Et si je voulais ajouter plus d'éléments d'entrée avec un type number, je ne veux pas répéter le code pour chaque itération. Par exemple, si j'avais 12 entrées supplémentaires, je ne veux pas utiliser ce code 12 fois de plus.

3
mcclosa 9 août 2016 à 17:42

7 réponses

Meilleure réponse

Vous ajoutiez uniquement les écouteurs d'événements à la première entrée de numéro.

https://jsfiddle.net/tpsbnp9q/5/

var myInput = document.querySelectorAll("input[type=number]");

function keyAllowed(key) {
  var keys = [8, 9, 13, 16, 17, 18, 19, 20, 27, 46, 48, 49, 50,
    51, 52, 53, 54, 55, 56, 57, 91, 92, 93
  ];
  if (key && keys.indexOf(key) === -1)
    return false;
  else
    return true;
}

myInput.forEach(function(element) {
  element.addEventListener('keypress', function(e) {
    var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
    if (!keyAllowed(key))
      e.preventDefault();
  }, false);

  // Disable pasting of non-numbers
  element.addEventListener('paste', function(e) {
    var pasteData = e.clipboardData.getData('text/plain');
    if (pasteData.match(/[^0-9]/))
      e.preventDefault();
  }, false);
})
3
imjosh 9 août 2016 à 15:39

Votre méthode querySelectorAll renvoie un tableau de tous les éléments d'entrée de type numéro. Vous avez actuellement le premier élément du tableau sélectionné, c'est donc la seule zone de saisie qui vérifie les entrées.

0
Sam Siegel 9 août 2016 à 14:52

Vous pouvez donner un nom de classe à tous les éléments d'entrée sélectifs et utiliser une boucle pour attacher des événements à chaque entrée [type = 'number'].

0
Manoj Yadav 9 août 2016 à 15:16

Le code qui limite une seule entrée est le [0] à la fin de cette ligne

var myInput = document.querySelectorAll("input[type=number]")[0];

Vous pouvez maintenant avoir une deuxième variable, par exemple myOtherInput, et ajouter un écouteur d'événements à cela également:

var myOtherInput = document.querySelectorAll("input[type=number]")[1];
myOtherInput.addEventListener('keypress', function(e) {
  var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
  function keyAllowed() {
    var keys = [8,9,13,16,17,18,19,20,27,46,48,49,50,
                51,52,53,54,55,56,57,91,92,93];
    if (key && keys.indexOf(key) === -1)
      return false;
    else
      return true;
  }
  if (!keyAllowed())
    e.preventDefault();
}, false);

Mais cela ajouterait du code répété et pourrait ne pas vous aider si vous vouliez limiter les charges d'entrées.

0
ManFox 9 août 2016 à 14:52

Vous pouvez utiliser js directement en entrée - je pense que c'est la solution simple et propre à votre problème:

Il suffit de mettre ceci sur chaque entrée: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

https://jsfiddle.net/tpsbnp9q/3/

-1
DANIEL 9 août 2016 à 15:26
  1. Obtenez tous vos champs numériques.
  2. Ajoutez un écouteur de pression de touche à chaque élément et si la touche enfoncée est nulle, ne l'ajoutez pas.

Cela ne couvre pas le cas du collage de nombres négatifs.

// get all number fields
var numInputs = document.querySelectorAll('input[type="number"]');

// Loop through the collection and call addListener on each element
Array.prototype.forEach.call(numInputs, addListener); 


function addListener(elm,index){
  elm.setAttribute('min', 0);  // set the min attribute on each field
  
  elm.addEventListener('keypress', function(e){  // add listener to each field 
     var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
     str = String.fromCharCode(key); 
    if (str.localeCompare('-') === 0){
       event.preventDefault();
    }
    
  });
  
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <lable>Number: <input type="number"></label>
  <br>
  <lable>Number: <input type="number"></label>
  <br>
  <lable>Text: <input type="text"></label>
    <br>
  <lable>Text: <input type="text"></label>

  
</body>
</html>
0
Yasin Yaqoobi 9 août 2016 à 16:25

Habituellement, il suffit d’utiliser l’attribut min="0" sur un champ type="number".

<input type="number" min="0" step="0.1" name="whatever" />

Si vous devez vous en tenir à <input type="text" /> ou prendre en charge de très anciens navigateurs ou si vous voulez vous assurer que les utilisateurs ne saisissent pas de nombres négatifs via le clavier (possible avec min="0" sur certains navigateurs), avec jQuery vous pouvez écraser les valeurs négatives sur focusOut pour toutes les entrées ayant un attribut de classe spécifique avec le code suivant:

$(document).ready(function(){
    $("body").on('focusout', '.my-input-number-positive', function(){
        if($(this).val() < 0){
            $(this).val('0'); // alternatively show a hint – or whatever
        }
    });
});

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

0
Hafenkranich 13 juil. 2017 à 07:07