待办列表输入框回车添加空行（行高异常）问题排查求助

哎，这个问题我之前也碰到过！咱们来一步步拆解原因：

可能的成因 #

• 空内容的<li>被直接添加：你的代码里，不管输入框有没有内容，点击按钮（或者回车触发操作时）都会创建一个<li>元素。当输入为空时，这个<li>里就是空字符串，没有任何内容撑高。如果你的CSS没给<li>设置固定的最小高度或者足够的内边距，浏览器就会用默认的极小行高渲染空行，看起来高度特别小。
• 回车事件未做合理处理：大概率你是按下回车触发了添加操作，但可能没阻止表单的默认提交行为，也没判断输入值是否为空，导致空内容被强制添加进去。
• CSS样式依赖内容存在：如果你的<li>样式里，内边距、行高这类属性是和内容关联的（比如用了特殊选择器只给有内容的<li>生效），空内容的<li>就没法触发这些样式，自然高度缩水。

解决办法 #

方法1：拦截空输入，不添加空行 #

修改你的JavaScript代码，先判断输入内容是否为空（记得去除前后空格，避免用户输入空格也被添加），只有非空时才创建<li>，同时处理回车事件并阻止默认行为：

$(function() {
  // 把添加逻辑抽成函数，方便复用
  function addTodoItem() {
    let inputVal = $('input[name=listItem]').val().trim();
    // 只有内容非空时才添加
    if (inputVal) {
      $('ul').prepend('<li>' + inputVal + '</li>');
      $('input[name=listItem]').val(''); // 清空输入框
    }
  }

  // 按钮点击事件
  $('.button').click(addTodoItem);

  // 回车触发添加
  $('input[name=listItem]').keypress(function(e) {
    if (e.which === 13) {
      addTodoItem();
      e.preventDefault(); // 阻止表单默认提交，避免页面刷新
    }
  });
});

方法2：给<li>设置最小高度（兜底方案） #

如果哪怕是空行也想保持正常高度，可以在CSS里给<li>加个min-height，确保不管有没有内容，高度都不会缩水：

li {
  min-height: 32px; /* 根据你的正常行高调整数值 */
  padding: 8px 12px; /* 配合内边距让行高更自然 */
  /* 其他你已有的样式 */
}

这样就算不小心添加了空行，视觉上也和正常行一致啦～

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