javascript - 将 JQuery 代码转换为纯 Javascript

Question

我正在尝试将以下 JQuery 重写为纯 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>