我正在为我的HTML表单创建一个自定义验证，以将maxlength属性的行为从阻止超过限制的输入更改为非阻止，因此允许用户输入超过指定限制的字符，但会看到一个错误。然而，我无法让它与禁用的字段一起工作。
我在规范（源代码）中读到：
如果某个元素被禁用，它将被禁止进行约束验证。
这似乎适用于具有required属性的输入，因为当字段为disabled并且没有值时，validity.valueMissing为false。但是当字段设置了maxlength属性时，当字段为disabled并且具有比maxlength更长的值时，validity.tooLong为true。
在下面的示例中，当我在输入字段中输入超过10个字符时，单击“Toggle disabled”按钮以禁用该字段，然后单击“Report validity”按钮，当我希望它不显示时（在Chrome和Firefox上选中），错误会显示出来。

const input = document.getElementById("input");
const errMsg = document.getElementById("err-msg");
const btnToggle = document.getElementById("btn-toggle");
const btnReport = document.getElementById("btn-report");

btnToggle.addEventListener("click", () => {
    input.disabled = !input.disabled;
});

btnReport.addEventListener("click", () => {
    input.maxLength = "10";
    if(input.validity.tooLong) {
        input.style.border = "red solid 1px";
        errMsg.style.display = "block";
    } else {
        input.style.border = "revert";
        errMsg.style.display = "none";
    }
    input.removeAttribute("maxlength");
});

<input id="input" type="text" value="">
<div id="err-msg" style="color: red; display: none;">Input should have at most 10 characters.</div>
<div>
    <button id="btn-toggle">Toggle disabled</button>
    <button id="btn-report">Report validity</button>
</div>

我是否缺少了规范中的某些内容？我如何利用内置的验证机制来：

• 不阻止用户在输入字段中输入更多字符，
• 输入的字符数超过允许的字符数时验证失败，
• 输入较短或字段禁用时是否通过验证（无论输入长度如何）？