如果不内联调用，则仅输入数字的 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">