按下Enter键时获取input输入框值为空的解决方法

可能的原因及对应修复方案 #

1. DOM未加载完成就绑定事件 #

这是最常见的问题：如果你的jQuery代码在输入框元素渲染前执行，$("#txt-search")找不到目标元素，事件绑定无效，自然获取不到输入值。

修复代码：将事件绑定逻辑包裹在$(document).ready()中，确保DOM完全加载后再执行：

$(document).ready(function() {
  $("#txt-search").keyup(function(e) {
    var txt = $(this).val().trim();
    if (e.key === "Enter") {
      alert(txt);
    }
  });
});

2. 输入框在表单内，按Enter触发页面刷新 #

如果输入框嵌套在<form>标签中，按下Enter会默认触发表单提交，页面直接刷新，导致还没获取到输入值就重置了，表现为空值。

修复代码：在事件中阻止表单默认提交行为：

$(document).ready(function() {
  $("#txt-search").keyup(function(e) {
    if (e.key === "Enter") {
      e.preventDefault(); // 阻止表单默认提交
      var txt = $(this).val().trim();
      alert(txt);
    }
  });
});

3. 切换更可靠的事件类型 #

部分场景下（比如输入法联想、自动补全），keyup事件可能出现输入值未同步的情况，可以尝试改用keydown事件：

$(document).ready(function() {
  $("#txt-search").keydown(function(e) {
    if (e.key === "Enter") {
      e.preventDefault();
      var txt = $(this).val().trim();
      alert(txt);
    }
  });
});

额外检查项 #

• 确认页面中没有重复的txt-search ID，重复ID会导致选择器匹配错误。
• 可以先执行console.log($("#txt-search").length)，如果输出0说明元素未被正确选中，需要检查选择器或DOM结构。

内容的提问来源于stack exchange，提问作者ar.gorgin