基于PouchDB改造的联系人列表：新输入框无法触发Focus/Blur事件

嘿，我一眼就看到你代码里的两个关键问题，这就是导致姓氏输入框focus和blur事件失效的核心原因：

问题根源 #

1. 重复的DOM ID：你给姓名输入框和姓氏输入框都设置了同一个ID input_${todo._id}，但DOM规范里ID必须是唯一的！当你调用document.getElementById('input_' + todo._id)时，浏览器永远只会返回第一个匹配到的元素（也就是姓名输入框），姓氏输入框根本没被选中，自然focus和后续事件都无法触发。
2. CSS状态控制混淆：原来的editing类应该是用来切换输入框显示状态的，但两个输入框共用edit类，双击时给父元素加editing类，只会触发第一个输入框的显示逻辑，第二个输入框要么被隐藏，要么没进入正确的编辑状态。

分步解决方案 #

1. 给输入框设置唯一ID #

修改输入框的ID命名规则，让姓名和姓氏输入框的ID区分开：

// 姓名输入框
var inputEditName = document.createElement('input');
inputEditName.id = 'input-name_' + todo._id; // 唯一ID
inputEditName.className = 'edit input-name'; // 新增input-name类用于CSS选择
inputEditName.value = todo.name;
inputEditName.addEventListener('keypress', nameKeyPressed.bind(this, todo));
inputEditName.addEventListener('blur', todoBlurred.bind(this, todo));

// 姓氏输入框
var inputEditLast = document.createElement('input');
inputEditLast.id = 'input-last_' + todo._id; // 唯一ID
inputEditLast.className = 'edit input-last'; // 新增input-last类用于CSS选择
inputEditLast.value = todo.lastname;
inputEditLast.addEventListener('keypress', lastKeyPressed.bind(this, todo));
inputEditLast.addEventListener('blur', todoBlurred2.bind(this, todo));

2. 修复双击事件的元素选择 #

更新双击事件里的getElementById调用，匹配新的唯一ID，同时给父元素添加区分编辑状态的类：

function nameDblClicked(todo) {
  var li = document.getElementById('li_' + todo._id);
  var inputEditName = document.getElementById('input-name_' + todo._id);
  // 替换className，避免状态叠加
  li.className = 'editing editing-name';
  inputEditName.focus();
}

function lastDblClicked(todo) {
  var li = document.getElementById('li_' + todo._id);
  var inputEditLast = document.getElementById('input-last_' + todo._id);
  li.className = 'editing editing-last';
  inputEditLast.focus();
}

3. 调整CSS控制输入框显示 #

修改CSS，让不同的编辑状态类对应显示对应的输入框：

/* 默认隐藏所有编辑输入框 */
.edit {
  display: none;
}

/* 编辑姓名时，显示姓名输入框 */
.editing-name .input-name {
  display: inline-block; /* 按需调整为你需要的显示样式，比如block */
}

/* 编辑姓氏时，显示姓氏输入框 */
.editing-last .input-last {
  display: inline-block;
}

/* 保留原有editing类的基础样式（如果有） */
.editing {
  /* 比如添加背景色、边框等编辑状态的通用样式 */
  background-color: #f5f5f5;
}

4. （可选）确保focus可靠触发 #

如果修复后focus还是偶尔失效，可以给focus加个极短的延迟（因为DOM更新可能需要一点时间）：

function nameDblClicked(todo) {
  var li = document.getElementById('li_' + todo._id);
  var inputEditName = document.getElementById('input-name_' + todo._id);
  li.className = 'editing editing-name';
  // 延迟10ms触发focus，确保元素已经显示
  setTimeout(() => inputEditName.focus(), 10);
}

这样修改后，重复ID的问题解决了，CSS状态也能准确控制对应输入框的显示，focus和blur事件就能正常工作啦！

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