键入必需数字时的HTML事件处理程序

Question

因此，我正在尝试编写一些HTML代码，当文本字段中至少写入8个字符时，这些代码将触发函数disableBtn()
这就是我目前所拥有的：

Now of course oninput causes the function to be called as soon as anything is written.  
Any ways to get around this?

Answer 1

首先，您需要更改在输入时调用的函数，以便对字段进行检查，例如

<input
id="UserID"
class="validate"
type="email"
minlength="8"
required
oninput="disableBtnWhenValid(this)"
>

注意，我将oninput属性移到了输入元素本身，这允许它将对自身的引用传递给函数disableBtnWhenValid。

要实现该功能，您有几个选项。你可以对长度进行快速而肮脏的检查：

function disableBtnWhenValid (inputEl) {
if (inputEl.value.length >= 8) {
disableBtn()
}
}

然而，由于您已经在输入上声明了minlength约束，因此在函数中重复它是不理想的，并且随着代码的更改，这两者可能会失去同步。您可以在这里使用ValidityState API：调用inputEl.validity.tooShort将返回输入值是否满足minlength约束。

function disableBtnWhenValid (inputEl) {
if (!inputEl.validity.tooShort) {
disableBtn()
}
}

相反，您可以使用inputEl.checkValidity()检查所有的有效性约束。在您的情况下，这意味着只有当输入的值为length>=时，才会调用disableBtn8和匹配电子邮件的模式，即在有效字符之间包含@。

请注意，validity.tooShort与IE不兼容。

Answer 2

我的建议：

UserID.addEventListener("input", function() {
if (UserID.value.length == 8) {
// disableBtn();
console.log("8"); // Added here just to check if code works
}
});

<div class="input-field col s12">
<input id="UserID" type="Email" class="validate" minlength="8" required>
<label for="UserID">UserID</label>
</div>