按下回车键元素未显示：keypress函数失效问题排查

针对按下回车键无反应的问题，从代码逻辑和常见坑点出发，整理以下解决方向：

排查要点与修正方案 #

• 确保jQuery已正确加载
  如果页面未引入jQuery，$对象不存在，事件绑定根本不会生效。需保证这段代码执行前，jQuery库已加载完成。

• 换用keydown事件替代keypress
  keypress事件对回车键的兼容性不如keydown，部分场景下可能无法触发。替换为keydown并使用更兼容的判断方式：

  $(document).keydown(function(e) {
    // 同时兼容keyCode和key属性，覆盖更多浏览器
    if (e.keyCode === 13 || e.key === 'Enter') {
      // 原有逻辑
    }
  });
  

• 确认DOM元素获取有效
  代码里的inputBox和list_li必须是有效的DOM对象。比如通过id获取时，要确保页面存在对应元素：

  const inputBox = document.getElementById('inputBox');
  const list_li = document.getElementById('list_li');
  

  若这两个变量为undefined，后续逻辑会直接失败，甚至报错阻断事件执行。

• 确保事件绑定时机正确
  必须在DOM加载完成后绑定事件，否则document未初始化完成，绑定无效。将代码包裹在$(document).ready()中：

  $(document).ready(function() {
    // 这里编写事件绑定代码
  });
  

修正后的完整示例 #

$(document).ready(function() {
  // 获取DOM元素
  const inputBox = document.getElementById('inputBox');
  const list_li = document.getElementById('list_li');

  $(document).keydown(function(e) {
    if (e.keyCode === 13 || e.key === 'Enter') {
      // 去除首尾空格，避免空输入
      const inputVal = inputBox.value.trim();
      if (inputVal === "") {
        alert("请输入内容");
      } else {
        const li = document.createElement("li");
        // 用textContent替代innerHTML，避免XSS风险
        li.textContent = inputVal;
        list_li.appendChild(li);
        // 清空输入框，提升用户体验
        inputBox.value = "";
      }
    }
  });
});

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