时间戳

首页 > 解决方案 > JavaScript 中的冷调用 blur() 函数

javascript - JavaScript 中的冷调用 blur() 函数

问题描述

我有一条线

document.getElementById("firstName").addEventListener("blur", validateField);

和 ：

validateField = (event) =>
{
    const el = event.target;
}

现在我想用form.addEventListener('submit', function(event)行中的相应元素调用 validateField() 函数。

document.getElementById("firstName").blur(); // This is not getting called.

但是冷调用 blur() 不起作用。

我要做的是在调用表单并且仍然无效时填充引导程序无效消息。

el.classList.add('is-invalid');
el.nextElementSibling.innerHTML = "This field is required";

尽量避免使用 jQuery，因为我可能会将其切换到引导程序版本 5。

标签： javascriptbootstrap-4

解决方案

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

以下代码适用于我。

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>

推荐阅读