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

Question

Here's the main part of the function that I'm having trouble with. I am using this function on a text input field for the oninput="myFunction" attribute.

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

So what I have done here is moved my input container inside of another container. After I type my first character in the input field, the field moves to the other container, however it loses focus and I cannot continue typing unless I click the input field again.

Here's an example: If you go to the google homepage: https://www.google.com/

When you start typing, the search field input element moves up to the header, however you can still continue typing as if nothing happened. The caret doesn't disappear and it doesn't force you to click the field to continue typing.

My issue is, right after my input element moves, it doesn't allow me to continue typing unless I click the field again.

I'd really appreciate any help!

Answer 1

You can fix it by requesting the focus to the desired element:

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