时间戳

首页 > 解决方案 > JavaScript 只允许数字和一定的长度，没有句点

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

问题描述

我需要一段 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”来限制空间。

标签： javascripthtmlwebforms

解决方案

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

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

推荐阅读