将JQuery代码转换为纯Javascript

Question

我正在尝试将以下JQuery重写为Pure Javascript。

我不知道为什么代码不起作用，但是它不起作用。 我猜我在使用“聚焦”时做错了。 有人可以帮我吗？

jQuery（工作）

$('.form-group input').on('focus blur', function (e) {
  $(this).parents('.form-group').toggleClass('active', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');

这是我到目前为止（无法正常工作）。

const inputs = document.querySelectorAll(".form-group input")
Array.from(inputs).forEach(input => {
  input.addEventListener("focusin", (e) => {
    const t = e.target as HTMLInputElement
    let formgroup = t.parentElement
    if(t.value.length > 0 ){
      formgroup.classList.toggle("onblur")
    }
  })
})

这是html标记。

    <form action="#" id="login-form">
        <div class="form-group">
          <label class="label-control">
            <span class="label-text">Email</span>
          </label>
          <input type="email" name="email" class="form-control" />
        </div>
        <div class="form-group">
          <label class="label-control">
            <span class="label-text">Password</span>
          </label> 
          <input type="password" name="password" class="form-control" />
        </div>
        <input type="submit" value="Login" class="btn" />
    </form>

Answer 1

关于jQuery代码的几个问题。

该类被命名为active并且您正在使用onblur 。 jQuery代码同时在焦点和模糊上运行。

 const inputs = document.querySelectorAll(".form-group input"); const focusBlurHandler = (e) => { const t = e.target; let formgroup = t.parentElement; if(t.value.length > 0 ){ formgroup.classList.toggle("active"); } }; Array.from(inputs).forEach(input => { input.addEventListener("focusin", focusBlurHandler); input.addEventListener("focusout", focusBlurHandler); }); 

 .active{background:lightgreen} 

 <form action="#" id="login-form"> <div class="form-group"> <label class="label-control"> <span class="label-text">Email</span> </label> <input type="email" name="email" class="form-control" /> </div> <div class="form-group"> <label class="label-control"> <span class="label-text">Password</span> </label> <input type="password" name="password" class="form-control" /> </div> <input type="submit" value="Login" class="btn" /> </form>