按下回车键提交表单时如何触发input的blur事件？

当按下回车键提交表单时，输入框未触发blur事件是因为浏览器默认行为中，这种场景下输入框不会主动失去焦点。以下是几种简洁的实现方式：

方式一：利用当前活跃元素触发blur #

提交表单时，若回车是从输入框触发的，此时输入框是页面的活跃元素，可以直接调用其blur()方法，无需额外查询元素：

function onSubmit(e) {
  console.log("submit  event", e);
  e.preventDefault();
  // 触发当前活跃元素的blur事件
  document.activeElement.blur();
}

方式二：通过表单元素定位输入框触发blur #

如果需要明确针对表单内的目标输入框，可通过表单对象直接查询并触发：

function onSubmit(e) {
  console.log("submit  event", e);
  e.preventDefault();
  // 获取表单内指定的输入框并触发blur
  e.target.querySelector('input[name="code"]').blur();
}

这两种方式都无需额外复杂逻辑，能简洁地让输入框在表单提交时触发blur事件。

内容的提问来源于stack exchange，提问作者user4617883