javascript - 防止用户在具有数字类型的输入元素中输入负数

Question

我从另一个关于如何防止用户输入负数的问题中得到以下代码，但它涵盖了所有输入。我有 2 个 number 类型的输入元素和 2 个 text 类型的输入元素。我显然希望允许用户向文本字段添加任何字符，但希望防止用户在 number 输入中输入负数/非数字内容。

我下面的代码适用于 number 类型的一个输入，而不适用于另一个。我将如何更改我的代码以允许它用于其他 number 输入？任何帮助将不胜感激。

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!

编辑

对于一些重复的问题，它们只涵盖一个输入或所有输入。我只想防止 2 个输入的负数。如果我想添加更多具有 number 类型的输入元素，我不想为每次迭代重复代码。例如，如果我有 12 个输入，我不想再使用该代码 12 次。

Answer 1

您只是将事件监听器添加到第一个数字输入。

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