在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) {&nbsp; event.preventDefault();&nbsp; document.getElementById("firstName").blur();});<form action="" id="frm">&nbsp; <input type="text" id="firstName" />&nbsp; <input type="submit" value="Press Enter" /></form>但对于替代解决方案：document.getElementById("frm").addEventListener('submit', function(event) {&nbsp; event.preventDefault();&nbsp; document.getElementById("frm").focus();});#frm:focus {&nbsp; outline: none;&nbsp; box-shadow: none;}<form action="" id="frm" tabindex="0">&nbsp; <input type="text" id="firstName" />&nbsp; <input type="submit" value="Press Enter" /></form>