如果不内联调用，则仅输入数字的 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) {&nbsp; evt = (evt) ? evt : window.event;&nbsp; var charCode = (evt.which) ? evt.which : evt.keyCode;&nbsp; if (charCode > 31 && (charCode < 48 || charCode > 57)) {&nbsp; &nbsp; return false;&nbsp; }&nbsp; return true;}var clickMe = document.querySelectorAll('.onlynumbers');for (var i = 0; i < clickMe.length; i++) {&nbsp; clickMe[i].addEventListener('keypress', function(event) {&nbsp; &nbsp; if(!isNumber(event)) event.preventDefault();&nbsp; }, false);}<input class="onlynumbers" type="text">