Question

当输入[type =“ email”]的长度> 0时如何添加类，如果输入的长度= 0则如何删除类？

我的JavaScript不太好。解决方案可以使用vue.js或纯javascript。

我尝试了一些Internet上的示例，但没有成功。

<div class="form-group">
  <input type="email" name="email" required>
  <label for="email">Email</label>
</div>

如果输入长度> 0，则添加类
如果输入长度= 0，则删除课程

Answer 1

如果通过添加和删除类来表示div的类，那么在jQuery中，它看起来像这样：

$(document).on("change", "input", function(){
    if($(this).val().length > 0) {
        $("div").addClass("form-group");
    } else {
        $("div").removeClass("form-group");
    }
});

但是，如果您想要纯Javascript，它将看起来像这样

<div id="myDiv" class="form-group">
  <input id="myInput" type="email" name="email" onChange="checkValue()" required>
  <label for="email">Email</label>
</div>

和Javascript：

function checkValue(){
   if(document.getElementById("myInput").value.length > 0){
      document.getElementById("myDiv").classList.add("form-group");
   } else {
      document.getElementById("myDiv").classList.remove("form-group");
   }
}
checkValue(); //First time run to see if input is empty or not

输入长度不为0时如何切换类别

1 个答案: