javascript - Vanilla javascript 函数仅输入数字，如果不内联调用则不起作用

Question

我发现这个函数旨在阻止输入非数字字符:

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

如果我这样调用它:<input class="onlynumbers" type="text" onkeypress="return isNumber(this);" >它有效。

如果我写这样的内容:

var clickMe = document.querySelectorAll('.onlynumbers');
for (var i = 0; i < clickMe.length; i++) {
    clickMe[i].addEventListener('keypress', function (event) {

        isNumber(event);

    }, false);
}

事实并非如此。我仍然可以输入字母。我无法弄清楚原因。 你能帮我吗？提示:我无法使用 JQUERY。

Answer 1

正如 @VLAZ 所建议的，使用 type="number" 是更好的解决方案。

但是，要修复您的代码 - 如果字符不是数字，请使用 event.preventDefault() 阻止字母插入:

function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}

var clickMe = document.querySelectorAll('.onlynumbers');

for (var i = 0; i < clickMe.length; i++) {
  clickMe[i].addEventListener('keypress', function(event) {
    if(!isNumber(event)) event.preventDefault();
  }, false);
}

<input class="onlynumbers" type="text">