为什么这个文本字段会因 morphdom 而失去焦点？

Question

下面是一个人为的示例，可以隔离我的问题。如果字符数是偶数，则会显示一个带有消息的简单文本字段。如果我将消息移动到文本字段下方，看起来 morphdom 看到只有文本字段的值发生了变化，因此它不会重建输入节点，这意味着控件保持焦点。如果我将消息保留在文本字段上方，尽管我指定了一个 id，但 morphdom 会重建控件。

来自文档...

https://github.com/patrick-steele-idem/morphdom

此外，此模块使用的算法将自动匹配具有相应 ID 并且在原始和目标 DOM 树中都找到的元素。

代码示例...

https://codepen.io/anon/pen/NOvZJz

var text = "";
var origRootDiv = null;
function createView() {
  var rootDiv = document.createElement("div");

  // If moved under, issue goes away
  if (text.length > 0 && text.length % 2 == 0) {
    var messageDiv = document.createElement("div");
    messageDiv.innerHTML = "Even char count!";
    rootDiv.appendChild(messageDiv);
  }
  // End if

  var input = document.createElement("input");
  input.id = "this-should-help-right";
  input.value = text;
  rootDiv.appendChild(input);
  input.addEventListener("input", function(e) {
    text = e.target.value;
    var newRootDiv = createView();
    morphdom(origRootDiv, newRootDiv);
  });

  return rootDiv;
}
origRootDiv = createView();
document.body.appendChild(origRootDiv);

编辑

当前的行为是，如果您在字段中键入 1 个字符，则文本字段会保留焦点（很好），但如果您在字段中键入第二个字符并且“偶数字符数！”消息显示文本字段失去焦点（坏）。

所需的行为是即使显示消息，文本字段也应保持焦点。

Answer 1

使用id将.focus()添加到输入中。
看到这个https://www.w3schools.com/jsref/met_text_focus.asp

解决方案

查看更新后的代码，

input.addEventListener("input", function(e) {
      text = e.target.value;
      var newRootDiv = createView();
      morphdom(origRootDiv, newRootDiv);

      // added the input with Id here
      document.getElementById('this-should-help-right').focus();
    });

我在morphdom 通话后添加了document.getElementById('this-should-help-right').focus();。所以我认为问题解决了