为什么这个文本域失去了对morphdom的关注？

Posted 2021-03-29

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

来自文档......

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

此外，此模块使用的算法将自动匹配具有相应ID且在原始DOM树和目标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个字符，文本字段将保留焦点（良好），但如果您在字段中键入第二个字符并且“偶数字符计数！”消息显示文本域失去焦点（坏）。

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

答案

使用.focus()将id添加到输入中。 看到这个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();
    });

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