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

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小提琴！

编辑

对于一些重复的问题，它们只涵盖一个输入或所有输入。 我只是想防止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);
})

Answer 2

您的querySelectorAll方法返回数字类型的所有输入元素的数组。 您当前在所选数组中有第一个元素，因此这是检查输入的唯一输入框。

Answer 3

仅导致一个输入受限的代码是此行末尾的[0]

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

现在你可以有一个第二个变量，比如myOtherInput，并为它添加一个事件监听器：

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

但它会添加重复的代码，如果您想限制输入的负载，可能无法帮助您。

Answer 4

您可以为所有选择性输入元素指定类名，并使用循环在每个输入[type ='number']上附加事件。

Answer 5

1. 获取所有数字字段。
2. 将keypress侦听器添加到每个元素，如果按下的键为零，则不添加它。

这不包括粘贴负数的情况。

 // 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> 

Answer 6

通常只在type="number"字段上使用min="0"属性就足够了。

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

如果您需要坚持<input type="text" />或支持非常旧的浏览器或想要确保用户不通过键盘输入负数（在某些浏览器上可能使用min="0" ），使用jQuery可以覆盖具有特定类属性的所有输入的focusOut上的负值，具有以下代码：

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

这不会取代服务器端验证！

Answer 7

您可以直接在输入上使用js - 我认为这是解决您问题的简单而干净的解决方案：

只需将它放在每个输入上： onkeypress='return event.charCode >= 48 && event.charCode <= 57'

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