將輸入字段追加到其他容器后，除非再次單擊，否則無法繼續輸入文本輸入。 它失去焦點

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