JavaScript 只允许数字和一定的长度，没有句点

Question

我需要一段 JavaScript 方面的帮助。我有这个代码：

<script>
function FilterInput(event) {
    var keyCode = ('which' in event) ? event.which : event.keyCode;
    isNotWanted = (keyCode == 69);
    return !isNotWanted;
};
function handlePaste(e) {
    var clipboardData, pastedData;
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text').toUpperCase();
    if (pastedData.indexOf('E') > -1) {
        e.stopPropagation();
        e.preventDefault();
    }
};
</script>

我想将用户的输入限制为 5 位数字。例如，对于这个输入框，我希望允许的数字不超过五个（例如 12345）并且没有句点：

<div class="col-md-3">
  <div class="form-group">
    <label>Customer Number</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-hashtag"></i></span>
      <input name="CustomerNumber" type="number" class="form-control" onkeydown="return FilterInput(event)" onpaste="handlePaste(event)" required>
    </div>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->

我将如何实现这一目标？我知道

type="text" 

它允许通过使用“maxlength”来限制空间。

Answer 1

一种方法是捕获输入，检查它是否通过验证检查，如果是，则继续，如果不是，将其设置为最后一个已知的正确值，如下所示：

var oldValue = "";
// listen for "input" event, since that handles all keypresses as well as cut/paste
document.getElementById("myInput").addEventListener('input', function (event) {
  var input = event.target;
  if (validateInput(input.value)) {
    // update old value with new value
    oldValue = input.value;
  }
  else {
    // set value to last known valid value
    input.value = oldValue;
  }
});

function validateInput(str) {
  // check length, if is a number, if is whole number, if no periods
  return /^[0-9]{0,5}$/.test(str);
}

Test: <input type="text" id="myInput"/><br/>
Try typing/pasting invalid input

Answer 2

我之前在这里给出的所有答案都已经过时了 我认为解决这个问题的最佳答案是

1. Javascript slice 用于保持字符长度
2. Javascript 替换以仅保留数字
3. javascript oninput 事件防止用户不使用复制粘贴来注入/输入无效字符的javascript。

<script>
function validate(field) {
   let val = field.value;
   let data = val.replace(/[^0-9]/g, "");
   field.value = data.slice(0,16);
}
</script>
<label for="atmno">Payment card Number</label>
<input name="atmno" type="text" oninput="validate(this)">

我在这里写的一篇文章中简要描述了答案：https://shopinson.com/javascript/javascript-validates-payment-card-number/

Answer 3

您可以不选择数字类型输入，而是使用文本类型输入，其中 maxlength 属性有效，如果值不是数字，则使用 JavaScript 引发错误。喜欢，

if(isNaN(input.value)){ // error code here }

Answer 4

纯js和dom操作解决方案

为简单起见添加一个Id属性

<input type="number" id="in" />

我们将监听 keypress 事件，如果达到最大长度或输入句点，则不执行任何操作，我使用 5 作为最大值。

let input = document.getElementById('in');
input.addEventListener('keypress',function test(e){
    if(input.value.length==5 || e.key=='.')
        e.preventDefault();
});

Answer 5

您可以在 filterInput 方法中运行验证检查。

document.querySelector('.input-group .form-control').addEventListener('keyup', function() {
var keyCode = ('which' in event) ? event.which : event.keyCode;
  isNotWanted = (keyCode == 69);

  if (this.value.length > this.maxLength) {
    this.value = this.value.slice(0, this.maxLength);
  }

  return !isNotWanted;
});

<div class="col-md-3">
  <div class="form-group">
    <label>Customer Number</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-hashtag"></i></span>
      <input maxlength="5" name="CustomerNumber" type="number" class="form-control"  required>
    </div>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->