在JavaScript中冷调用blur()函数

Question

我有一条线document.getElementById("firstName").addEventListener("blur", validateField);和 ：validateField = (event) =>{    const el = event.target;}现在我想使用该行中的相应元素调用 validateField() 函数form.addEventListener('submit', function(event)。document.getElementById("firstName").blur(); // This is not getting called.但是冷调用blur() 不起作用。我想做的是在调用表单但仍然无效时填充引导程序 is-invalid 消息。el.classList.add('is-invalid');el.nextElementSibling.innerHTML = "This field is required";尝试避免使用 jQuery，因为我可能会将其切换到 bootstrap 版本 5。

Answer 1

我确实认为从技术上讲，提交表单会失去焦点，除非用户按下回车键来提交。另一种方法也许是，您可以尝试专注于其他事情，而不是模糊特定的事物！

以下代码对我有用。

document.getElementById("frm").addEventListener('submit', function(event) {

  event.preventDefault();

  document.getElementById("firstName").blur();

});

<form action="" id="frm">

  <input type="text" id="firstName" />

  <input type="submit" value="Press Enter" />

</form>

但对于替代解决方案：

document.getElementById("frm").addEventListener('submit', function(event) {

  event.preventDefault();

  document.getElementById("frm").focus();

});

#frm:focus {

  outline: none;

  box-shadow: none;

}

<form action="" id="frm" tabindex="0">

  <input type="text" id="firstName" />

  <input type="submit" value="Press Enter" />

</form>