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>

将JQuery代码转换为Pure Javascript

1 个答案: