入力フィールドを別のコンテナに追加した後、再度クリックしない限り、テキスト入力を続行できません。それはフォーカスを失う

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