焦點不適用於textarea

Question

我正在創建一個頁面，用戶可以在其中添加問題及其解決方案，他可以刪除問題，還可以使用javascript中的DOM動態地對其進行編輯。 我希望每當用戶單擊“編輯”按鈕時，出現的文本框就會自動對焦。

這是我頁面的javascript代碼...

var questionText;
var answerText;
var questionArray=[];
var answerArray=[];
var i=0;
var j=10000;

function addProblem(){
    var body = document.getElementsByTagName('body')[0];
    questionText = document.getElementById('questionId').value;
    answerText = document.getElementById('answerId').value;

    questionArray.unshift(questionText);
    answerArray.unshift(answerText);

    var myContainer = document.getElementById('container');
    var myDiv = document.createElement("div");
    var questionLogo = document.createElement("p");
    questionLogo.id = "questionLogo";
    var textNode = document.createTextNode("Question:");
    var question = document.createElement("p");
    question.id = "question";
    var questionDetail = document.createTextNode(questionArray[0]);

    var deleteButton = document.createElement("button");
    deleteButton.innerHTML = "Delete";
    deleteButton.id = i;
    var editButton = document.createElement("button");
    editButton.innerHTML = "Edit";
    editButton.id = j;

    var answerLogo = document.createElement("p");
    answerLogo.id = "answerLogo"
    var ansTextNode = document.createTextNode("Answer: ");
    var answer = document.createElement("p");
    answer.id = "answer";
    var answerDetail = document.createTextNode(answerArray[0]);
    var mybr = document.createElement("br");

    if(i==0){
        myContainer.appendChild(myDiv);
        myDiv.appendChild(questionLogo);
        questionLogo.appendChild(textNode);
        questionLogo.appendChild(question);
        question.appendChild(questionDetail);
        myDiv.appendChild(answerLogo);
        answerLogo.appendChild(ansTextNode);
        answerLogo.appendChild(answer);
        answer.appendChild(answerDetail);
        answerLogo.appendChild(mybr);
        myDiv.appendChild(deleteButton);
        myDiv.innerHTML += ' ';
        myDiv.appendChild(editButton);
    }
    else if (i > 0)
    {
        myContainer.insertBefore(myDiv,myContainer.firstChild);
        myDiv.appendChild(questionLogo);
        questionLogo.appendChild(textNode);
        questionLogo.appendChild(question);
        question.appendChild(questionDetail);
        myDiv.appendChild(answerLogo);
        answerLogo.appendChild(ansTextNode);
        answerLogo.appendChild(answer);
        answer.appendChild(answerDetail);
        answer.appendChild(mybr);
        myDiv.appendChild(deleteButton);
        myDiv.innerHTML += ' ';
        myDiv.appendChild(editButton);
    }

    i++;
    j++;

    myDiv.childNodes[7].addEventListener("click", function(){
        var deleteElement = document.getElementById(this.id);
        deleteElement.parentNode.parentNode.removeChild(deleteElement.parentNode);
    });

    myDiv.childNodes[9].addEventListener("click",function(){
         var editElement = document.getElementById(this.id);
         var quesEdit = editElement.parentNode.childNodes[1];
         var quesEditText = quesEdit.innerHTML;

         var ansEdit = editElement.parentNode.childNodes[4];
         var ansEditText = ansEdit.innerHTML;

         var editDiv1 = document.createElement("div");
         editDiv1.id = "editDiv1"
         var quesTextArea = document.createElement("textarea");
         quesTextArea.innerHTML += quesEditText;
         quesTextArea.focus();
         var saveButton1 = document.createElement("button");
         saveButton1.innerHTML = "Save";
         editDiv1.appendChild(quesTextArea);
         editDiv1.innerHTML += ' ';
         editDiv1.appendChild(saveButton1);
         quesEdit.parentNode.replaceChild(editDiv1,quesEdit);

         var editDiv2 = document.createElement("div");
         editDiv2.id = "editDiv2"
         var ansTextArea = document.createElement("textarea");
         ansTextArea.innerHTML += ansEditText;
         var saveButton2 = document.createElement("button");
         saveButton2.innerHTML = "Save";
         editDiv2.appendChild(ansTextArea);
         editDiv2.innerHTML += ' ';
         editDiv2.appendChild(saveButton2);
         ansEdit.parentNode.replaceChild(editDiv2,ansEdit);
    });
}

我試圖使用quesTextArea.focus（）來聚焦文本區域。 但在questextArea是textarea的名稱的地方它不起作用。 請幫助我怎么做。

Answer 1

為使該元素可以被聚焦，在您對它調用聚焦時，它必須在DOM中。 您應該在replaceChild函數之后調用focus函數

 editDiv1.appendChild(quesTextArea);
 editDiv1.appendChild(saveButton1);
 quesEdit.parentNode.replaceChild(editDiv1,quesEdit);
 quesTextArea.focus();

我創建了一個簡單的示例，如下所示，您可以檢查一下
https://jsfiddle.net/pd9c6c7a/3/

Answer 2

將autofocus屬性添加到textarea元素。 這樣，無論何時將其附加到DOM，都將在其中激活光標。

Answer 3

 var div = document.getElementById('parent'); var txt = document.createElement('textarea'); div.appendChild(txt); txt.focus(); 

 <html> <head></head> <body> <div id="parent"> <input type="text" value="" /> </div> </body> </html> 

調用focus函數時，該元素必須位於DOM中。 在調用appendChild（）之后，移動您的focus（）函數。

 quesTextArea.innerHTML += quesEditText;
 var saveButton1=document.createElement("button");
 saveButton1.innerHTML="Save";
 editDiv1.appendChild(quesTextArea);
 quesTextArea.focus();

Answer 4

“ textarea”尚未添加到要顯示的窗口中，元素必須是文檔對象樹的一部分。 如果不起作用，請添加50ms延遲。

setTimeout(function(){e.focus();}, 50);

Answer 5

請嘗試以下方法：

 var body=document.getElementsByTagName('body')[0]; var quesTextArea=document.createElement("textarea"); var button=document.createElement("button"); button.innerHTML = "click Me"; button.addEventListener("click",function(e){ e.preventDefault(); quesTextArea.focus(); }); body.appendChild(quesTextArea); body.appendChild(button); 

 <html> <body> <body> </html> 

嘗試添加preventDefault 。