Javascript 当输入中有文本时，如何在元素上切换类？

我只是在学习JavaScript，还没有找到任何解决这个问题的普通JS解决方案。我正在处理一个浮动标签表单组，其中输入的标签“隐藏”在输入后面。当输入中有文本时，我希望通过切换类“formgroupwithvalue”使其上升。 我不知道任何jQuery，我想避免它。 这是我的密码： 注：我已经设法在输入处于焦点时切换一个类（更改标签的颜色）。虽然这并不是最好的解决方案，但它仍然可以正常工作

//动态表单标签
const input=document.querySelectorAll（'.custom input'）；
const formGroup=document.querySelectorAll（'.formGroup'）；
//当输入处于焦点时切换颜色
输入[0]。addEventListener（'focus'，（）=>formGroup[0]。classList.toggle（'form-group-with-focus'）；
输入[0]。addEventListener（'blur'，（）=>formGroup[0]。类列表。切换（'form-group-with-focus'）；
输入[1]。addEventListener（'focus'，（）=>formGroup[1]。classList.toggle（'form-group-with-focus'）；
输入[1]。addEventListener（'blur'，（）=>formGroup[1]。类列表。切换（'form-group-with-focus'）；
输入[2]。addEventListener（'focus'，（）=>formGroup[2]。classList.toggle（'form-group-with-focus'）；
输入[2]。addEventListener（'blur'，（）=>formGroup[2]。类列表。切换（'form-group-with-focus'）；
输入[3]。addEventListener（'focus'，（）=>formGroup[3]。classList.toggle（'form-group-with-focus'）；
输入[3]。addEventListener（'blur'，（）=>formGroup[3]。类列表。切换（'form-group-with-focus'）；
//当输入有值时切换标签位置

。表单组{
位置：相对位置；
最小高度：50px；
}
.表格组标签{
位置：绝对位置；
z指数：-1；
过渡：0.3s；
左：5px；
}
.带焦点标签的窗体组{
颜色：红色；
}
.带值标签的窗体组{
转化：translateY（-80%）；
}

全名
全名
全名
全名

如果希望在用户键入时调用某些JS/函数，可以使用或事件。

为了简化代码，可以循环输入并生成单个事件处理程序，而不是多个事件处理程序。此外，还可以调用输入的父节点来打开该类

另外，如果只希望标签显示输入是否有值，则不希望切换

我选择了

input

事件，因为它包括粘贴和键盘输入

//动态表单标签
const input=document.querySelectorAll（'.custom input'）；
input.forEach（函数（el）{
el.addEventListener（“输入”，函数（e）{
如果（e.target.value==“”）{
e、 target.parentNode.classList.remove（'form-group-with-value'）
}否则{
e、 target.parentNode.classList.add（'form-group-with-value'）
}
});
});
。表单组{
位置：相对位置；
最小高度：50px；
}
.表格组标签{
位置：绝对位置；
z指数：-1；
过渡：0.3s；
左：5px；
}
.带焦点标签的窗体组{
颜色：红色；
}
.带值标签的窗体组{
转化：translateY（-80%）；
}

全名
全名
全名
全名
forEach
在IE中不受支持。因此，最好使用
for
循环instead@Shuvo，IE 9+支持forEach
。非常感谢你！兄弟，我做A-B测试。我总是要和IE11一起工作。IE支持forEach，但不支持DOM节点：