javascript - 将元素传递到 JavaScript 函数中，然后将其添加到 EventListener

Question

我正在尝试编写一个小的 JavaScript 来验证我网站形式的 type =“number”的输入。基本上，这个函数试图确保允许输入的最大长度不超过我传入的参数。我编写的函数接受两个参数，一个是 html 元素，另一个是 maxlength。但是，当我将此功能添加到输入元素后，它似乎不起作用。请看一下并告诉我哪里出错了以及错过了哪些概念。

/* Show submit button only when the form has been validated */
/* Variables */
var form = document.querySelector(".resForm");
var resFormBtn = document.querySelector(".submitButton");
var numInput = document.querySelector("#numberInput");

function showSubmitButton() {
    if (form.checkValidity() === true) {
        resFormBtn.style.display = "block";
    }
}

function validateNumInput(maxlength, ele) {
    if (ele.length > maxlength) {
        ele.value = ele.value.slice(0, maxlength);
    }
}

form.addEventListener("change", showSubmitButton, false);

numInput.addEventListener("input", function () {
    validateNumInput(8, numInput);
}, false);

Answer 1

if (ele.length > maxlength)

这里有问题。 ele 是一个引用节点，它没有“length”这样的属性，因此条件内的代码永远不会触发。

只需将其更改为

ele.value.length > maxlength

代码就可以了