mcclosa mcclosa - 3 months ago 9
Javascript Question

Preventing user from entering negative numbers in input elements with number type

I have got the following code from another question on here on how to prevent users from entering negative numbers, however it covered all inputs. I have 2

number
type input elements and 2
text
type input elements. I obviously want to allow the user to add any character to the text fields but want to prevent users entering negative numbers/non number content to the
number
inputs.

My code below works for one input with the
number
type and not the other. How would I go about changing my code to allow it for the other
number
input? Any help would be greatly appreciated.

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!

Edit



With some of the duplicate questions, they cover just one input or all inputs. I just want to prevent negative numbers of 2 inputs. And if I wanted to add more input elements with a
number
type, I don't want to repeat code for each iteration. For example if I had 12 more inputs, I don't want to use that code 12 more times.

Answer

You were only adding the event listeners to the first number input.

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