新的输入类不能使用焦点和模糊事件

Question

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

几周前，我偶然发现了 PouchDB，我发现它的功能正是我的数据库项目所需要的，我轻松实现了它的教程 (the todo's list)，并认为下一步是做一些修改以此作为未来的、假设的、实际的项目的基础。我对 Javascript 的了解非常基础，但我可以制作表格或网格/列表，所以我认为这不会那么难。

我的第一个想法是，它可以是一个包含人名的列表，而不是一个待办事项列表！就像拥有两个（可能还有多个）输入字段而不是示例代码使用的那个的借口一样。所述示例使用一个非常简单的界面，为了编辑待办事项之一，用户必须双击列表中的项目，然后会出现一个输入字段（应用程序自动关注所述字段），用户可以在其中重写或删除该项目，只需按 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 是否犯了一个错误（我的 Google 搜索告诉我很多遇到类似问题的人都使用后者）？

Answer 1

我在创建这个 sn-p 时注意到的事情：

inputEditName.id = 'input_' + todo._id;

和

inputEditLast.id = 'input_' + todo._id;

似乎分配了相同的 id，所以一个不会工作。

这是一个我认为说明你想要什么的例子。

function nameKeyPressed(todo) {     
    return function(e){
      console.log('name Keypressed!')
      var div = document.getElementById('li_' + todo._id);
      var inputEditName = document.getElementById('input_first' + todo._id);
      div.className = 'editing';
      inputEditName.focus();
    }
  }

  function lastKeyPressed(todo) {     
    return function(e){
      console.log('last KeyPressed!')
      var div = document.getElementById('li_' + todo._id);
      var inputEditLast = document.getElementById('input_last' + todo._id);
      div.className = 'editing';
      inputEditLast.focus();
    }
  }

//a few lines ahead on the code we make the list
  var todo = {
    _id:'123',
    name:'firstName',
    lastname:'lastName'
  };
  var inputEditName = document.createElement('input');
  inputEditName.id = 'input_first' + todo._id;
  inputEditName.className = 'edit';
  inputEditName.value = todo.name;
  inputEditName.addEventListener('keypress', nameKeyPressed(todo));
  // inputEditName.addEventListener('blur', todoBlurred.bind(this, todo));

  var inputEditLast = document.createElement('input');
  inputEditLast.id = 'input_last' + todo._id;
  inputEditLast.className = 'edit';
  inputEditLast.value = todo.lastname;
  inputEditLast.addEventListener('keypress', lastKeyPressed(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);
  var list = document.getElementById("ul_list");
  list.appendChild(li);

<div id="list">
  <ul id="ul_list">
  </ul>
</div>