将输入字段追加到其他容器后，除非再次单击，否则无法继续输入文本输入。 它失去焦点

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