焦點不能在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（）textarea的; 但它不工作，其中questextArea是textarea的名稱。請幫助我如何做到這一點。

Answer 1

對於元素可能會得到重點，它必須在您調用焦點時在DOM中。的replaceChild功能後，您應該調用對焦功能

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>

元素必須是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。