删除输入焦点上的类名答案

【问题标题】：Remove className on input focus删除输入焦点上的类名
【发布时间】：2023-02-07 21:10:03
【问题描述】：

我正在使用引导程序处理多种形式。在我的 validateForm 函数中，如果输入值为空（用户未填写任何内容），它会添加一个“无效”类

单击下一步后，输入框会变成红色背景色，表明用户尚未填写任何内容。

在以下任一情况下，如何删除“无效”类：

用户在输入字段中键入内容

或者

用户点击/关注输入字段

从而去除红色背景颜色

脚本：

function validateForm() {
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
for (i = 0; i < y.length; i++) {
    if (y[i].value == "") {
        y[i].className += " invalid";
        valid = false;
    }
}
if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; }
return valid;
}

CSS：

        input.invalid {
        background-color: #ffdddd;
    }

非常感谢您的帮助！

【问题讨论】：

使用 classList.add 和 classList.remove 而不是更改 className - developer.mozilla.org/en-US/docs/Web/API/Element/classList
您可能会发现另一种使用 :focus 选择器的简单方法。阅读 :focus 和 :focus-within developer.mozilla.org/en-US/docs/Web/CSS/:focus-within - 也许将它与类名结合起来
当然，您希望“无效”类保留在输入中，直到其值实际有效为止——否则有什么意义。空字符串（根据定义）不是有效输入。
@Pete 啊，对了，我已经把它改成y[i].classList.add ("invalid"); - 会试着看看我是否能弄清楚现在如何调用 classList.remove 焦点或 w/e

标签： javascript

【解决方案1】：

是这样的：

document.getElementsByTagName("input").forEach(function(input) {
    input.addEventListener("focus", function(event) {
        input.classList.remove("invalid");
    });
    input.addEventListener("input", function(event) {
        input.classList.remove("invalid");
    });
});

【讨论】：