如何在用户按下回车键或点击页面其他位置时获取HTML input输入框的数据

你需要分别监听输入框失焦和回车按下两个事件来满足需求，实现代码如下：

基础实现代码 #

// 1. 获取目标输入框元素，替换为你实际的选择器
const targetInput = document.querySelector('#your-input-id');

// 2. 定义输入完成后要执行的业务逻辑
function handleInputFinish() {
  const inputValue = targetInput.value.trim();
  // 此处编写你的实际业务逻辑，比如数据校验、查询、提交等
  console.log('输入完成，当前值：', inputValue);
}

// 3. 监听失焦事件：用户点击页面其他位置、切走窗口时触发
targetInput.addEventListener('blur', handleInputFinish);

// 4. 监听键盘按下事件：用户按下回车键时触发
targetInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    // 若输入框位于form表单内，可加此行阻止默认的表单提交行为
    event.preventDefault();
    handleInputFinish();
  }
});

注意事项 #

• 原代码中addEventListener("input", myFunction())的写法存在错误：给事件回调传参时加()会立刻执行函数，仅需要传入函数名myFunction即可
• 如果需要避免短时间内重复触发逻辑（比如用户快速按回车后马上失焦），可以给handleInputFinish加防抖处理

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