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

【问题标题】：Preventing user from entering negative numbers in input elements with number type防止用户在数字类型的输入元素中输入负数
【发布时间】：2016-08-09 14:42:28
【问题描述】：

我从另一个问题中得到以下代码，关于如何防止用户输入负数，但它涵盖了所有输入。我有 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 次。

【问题讨论】：

请记住，阻止用户进入此客户端并不能保证他们不会被输入。您还需要对此进行服务器端检查。（用户可以在他们的客户端上弄乱任何东西，包括你的 javascript）
@DylanMeeus 我确实对此进行了服务器端检查，也希望在前端也阻止它
您已经设置了min 属性。
Is there any way to prevent input type="number" getting negative values?的可能重复
@gcampbell 这只是防止用户不使用箭头键选择负数，用户仍然可以在输入中输入-1

标签： javascript jquery validation input

【解决方案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);
})

【讨论】：

感谢addEventListener('paste', function(){});

【解决方案2】：

通常只在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
        }
    });
});

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

导致只有一个输入被限制的代码是这一行末尾的 [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);

但它会添加重复的代码，如果你想限制输入的负载，它可能对你没有帮助。

【讨论】：

是的，我试图避免重复代码，我确实认为这是问题所在。有没有办法用数字类型选择我的文档中的所有输入？
第一行正是这样做的，然后选择其中一个，如果你删除 [0]，那么它将返回页面上所有数字输入的数组。
当我删除 [0] 时，它允许我在两个输入中输入 -1
是的，它会的，您必须获取数组并循环遍历它，为每个元素添加事件侦听器。（我觉得肯定有更好的方法来做到这一点，但这是一种方法）
是的，这就是我现在正在做的事情，但是如果我还有 4 个数字类型输入，它会变得有点混乱，希望我能找到更好的解决方案，但添加事件每个语句的听众现在都会做

【解决方案5】：

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

【讨论】：

【解决方案6】：

获取所有号码字段。
为每个元素添加按键监听器，如果按下的按键为零，则不要添加它。

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

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：