javascript - 将输入字段附加到不同的容器后，除非再次单击，否则我无法继续输入文本输入。它失去焦点

Question

这是我遇到问题的函数的主要部分。我在 oninput="myFunction"属性的文本输入字段上使用此函数。

function myFunction() {
var myContainer1 = document.getElementById("newContainer");
var myContainer2 = document.getElementById("inputContainer");
myContainer1.appendChild(myContainer2);
myContainer2.style.display = "inline-block";
}

所以我在这里所做的是将我的输入容器移动到另一个容器中。在输入字段中输入第一个字符后，该字段会移动到另一个容器，但是它会失去焦点，并且除非再次单击输入字段，否则我无法继续输入。

这是一个例子:如果你去google主页:https://www.google.com/

当您开始输入时，搜索字段输入元素会向上移动到标题，但您仍然可以继续输入，就像什么都没发生一样。插入符号不会消失，也不会强制您单击该字段以继续键入。

我的问题是，在我的输入元素移动后，它不允许我继续输入，除非我再次单击该字段。

我真的很感激任何帮助!

Answer 1

您可以通过请求焦点到所需的元素来修复它:

function myFunction() {
  var myContainer1 = document.getElementById("newContainer");
  var myContainer2 = document.getElementById("inputContainer");
  myContainer1.appendChild(myContainer2);
  myContainer2.style.display = "inline-block";
  myContainer2.focus();
}