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手机上设置任何东西）所以我认为这不是一个问题，我可能是错的，但我希望事实并非如此。我也试过多次输入＆＃39;因为有一个单独的编辑类导致我的问题，但是这个问题似乎引发了一个不同类型的问题（现在我根本无法访问或编辑姓氏字段）。

所以我在过去的几天里一直在摸不着头脑，除了使用其他两个输入的css类之外，我还能说出名字和姓氏字段之间的区别以及为什么事件在一个字段上工作而在另一个字段上不工作。这是我的（无可否认的）尝试复制/粘贴Javascript的错误吗？除非我以某种方式指定它，否则不允许新的css类具有这些事件？我使用普通的旧Javascript代替JQuery犯了错误（我的谷歌搜索告诉我很多遇到类似问题的人使用后者）？

Answer 1

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

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

和

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

似乎要分配相同的ID，因此无法正常工作。

以下是我想要说明你想要的一个例子。

＆＃13;

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);

＆＃13;

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

＆＃13;

新输入类无法使用焦点和模糊事件

1 个答案: