Javascript 新的输入类可以'；不要使用焦点和模糊事件

我最近一直有这个问题，我似乎在这里或谷歌都找不到答案，所以我想我不妨自己问一次。也就是说，如果我把这个问题标错了，我会提前道歉，因为我真的可以准确地指出我的问题所在。另外，我将要谈论很多关于PockDB及其教程的内容，不是因为这是一个问题，而是因为它为我所做的事情提供了很多上下文

几周前，我偶然发现了PockDB，我发现它的功能正是我的数据库项目所需要的，我轻而易举地实现了它的教程（），并认为下一步将对它进行一些修补，作为未来、假设、实际项目的基础。我对Javascript的了解非常基础，但我可以制作表单或网格/列表，所以我想这不会那么难

我的第一个想法是，与其列出待办事项，还不如列出一些人的名字！作为一个借口，使用两个（可能是多个）输入字段，而不是示例代码使用的输入字段。所述示例使用一个非常简单的界面，为了编辑todo中的一个，用户必须双击列表中的项目，并出现一个输入字段（应用程序自动聚焦于所述字段），用户可以在其中重写或删除该项目，只需按enter键或从字段中移除焦点即可触发模糊事件，从而保存其更改。我遇到的第一个奇怪问题是，当添加第二个要编辑的项目时，我不能使用与第一个相同的css类

  function nameDblClicked(todo) {     
    var div = document.getElementById('li_' + todo._id);
    var inputEditName = document.getElementById('input_' + todo._id);
    div.className = 'editing';
    inputEditName.focus();
  }

  function lastDblClicked(todo) {     
    var div = document.getElementById('li_' + todo._id);
    var inputEditLast = document.getElementById('input_' + todo._id);
    div.className = 'editing';
    inputEditLast.focus();
  }

//a few lines ahead on the code we make the list
  var inputEditName = document.createElement('input');
  inputEditName.id = 'input_' + todo._id;
  inputEditName.className = 'edit';
  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_' + todo._id;
  inputEditLast.className = 'edit';
  inputEditLast.value = todo.lastname;
  inputEditLast.addEventListener('keypress', lastKeyPressed.bind(this, todo));
  inputEditLast.addEventListener('blur', todoBlurred2.bind(this, todo));

  var li = document.createElement('li');
  li.id = 'li_' + todo._id;
  li.appendChild(divDisplay);
  li.appendChild(inputEditName);
  li.appendChild(inputEditLast);

这不起作用，经过一点研究后，我发现出于某种原因，对两个输入使用相同的css类（再次抱歉，如果我误用了标记），只会让我编辑第一个，所以我使用了一点ducktape，只是在css文件上克隆了类：edit2和editing2。这个真的很管用！（即使我不太喜欢我处理这个问题的方式，我想我以后会考虑这个问题）我可以很好地编辑这两个字段，但现在我终于开始着手解决这个问题了。出于某种原因，现在姓氏字段上的焦点事件不再起作用。模糊效果也不起作用

我试着做一些我自己的研究，我发现了tabindex，以及这样的事情如何影响这类事情，但将它添加到lastname字段没有任何作用。我了解了设置超时的情况，以及由于某些原因浏览器可能需要几毫秒才能正确激活事件，但这也不起作用（我尝试使用非常大的计时器只是为了测试，计时器确实起作用，但焦点事件仍然没有触发）。我发现多个浏览器有不同的操作方式，有些浏览器可能没有我使用的所有功能，但我使用的是Chrome（因为我计划在Android手机上使用任何我想到的功能），所以我认为这不会是一个问题，我可能错了，但我希望不是这样。我还尝试过拥有多个“输入”类，因为单一的编辑类会给我带来问题，但这一类似乎会引发另一种问题（现在我根本无法访问或编辑姓氏字段）

---

因此，在过去的几天里，我一直在挠头，除了对这两个输入使用其他css类之外，我无法区分名字和姓氏字段之间的区别，以及为什么事件在一个字段上工作而在另一个字段上不工作。这是我复制/粘贴Javascript的错误吗？除非我以某种方式指定，否则新的css类不允许有这些事件吗？我仅仅使用简单的旧Javascript而不是JQuery（我的谷歌搜索告诉我很多遇到类似问题的人都使用后者），这是不是犯了一个错误？

我在创建此代码段时注意到的一些事情：

inputeitname.id='input_u'+todo.\u id

及

inputeitlast.id='input_uu'+todo.\u id

似乎正在分配相同的id，因此无法使用

这里有一个例子，我想它说明了你想要什么


功能名称按键按下（todo）{
返回函数（e）{
console.log（'name Keypressed！'）
var div=document.getElementById（'li_'+todo.\u id）；
var inputEditName=document.getElementById（'input\u first'+todo.\u id）；
div.className='编辑'；
InputitName.focus（）；
}
}
功能lastKeyPressed（todo）{
返回函数（e）{
console.log（'last KeyPressed！'）
var div=document.getElementById（'li_'+todo.\u id）；
var inputeitlast=document.getElementById（'input\u last'+todo.\u id）；
div.className='编辑'；
inputeItlast.focus（）；
}
}
//代码前面几行是我们列出的
变量todo={
_id:'123'，
姓名：'firstName'，
lastname:'lastname'
};
var-inputeitname=document.createElement（'input'）；
InputitName.id='input_first'+todo.\u id；
InputitName.className='edit'；
InputitName.value=todo.name；
InputitName.addEventListener（'keypress'，nameKeyPressed（todo））；
//InputitName.addEventListener（'blur'，todoBlurred.bind（this，todo））；
var inputeitlast=document.createElement（'input'）；
InputItLast.id='input\u last'+todo.\u id；
InputItLast.className='edit'；
InputItLast.value=todo.lastname；
InputitLast.addEventListener（'keypress'，lastKeyPressed（todo））；
//InputitLast.addEventListener（'blur'，todoBlurred2.bind（this，todo））；
var li=document.createElement（'li'）；
li.id='li_u'+todo.\u id；
//li.appendChild（divDisplay）；
li.追加子项（输入名称）；
li.appendChild（inputedLast）；
var list=document.getElementById（“ul_list”）；
表1.儿童（李）



您好，很抱歉回复太晚，我只有早上的时间来做这件事。无论如何，这将在某种意义上起作用，它恢复了我上次尝试时丢失的所有功能，但这将使我恢复到原来的状态