logo标签列表

文本框聚焦无效

javascriptjqueryhtml
4

我正在创建一个页面，用户可以在其中添加问题及其解决方案，他可以删除该问题，并且还可以使用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的名称。请问如何解决这个问题。

尝试使用此代码：document.getElementById(answer).focus(); - Edison Augusthy
@Edison 当点击编辑按钮时，动态创建了一个textarea，并且你所说的是在添加问题时而不是在编辑时的初始textarea。 - Isha Goyal
5个回答
5

要使元素获得焦点，必须在调用其焦点函数时，该元素已经存在于 DOM 中。您应该在 replaceChild 函数之后调用 focus 函数。

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

我创建了一个简单的示例，如下链接所示，您可以查看它：
https://jsfiddle.net/pd9c6c7a/3/

当textarea不是某个元素的子元素时，它是可以工作的，但当它是某个元素的子元素时（就像在我的情况下它是一个div元素的子元素），然后在div上调用replaceChild时，它就无法工作了。 - Isha Goyal
我已经编辑了我的示例，将一个文本区域作为div的子元素，但它仍然正常工作。我认为问题不在这些元素的结构上。你能尝试将focus函数包裹在setTimeout中，以检查它是否工作吗？ setTimeout(function(){quesTextArea.focus();}, 0); - Trung Duong
当我将一个按钮添加到同一个div中，然后尝试聚焦文本区域时，它不起作用。我尝试使用setTimeout函数，但它也不起作用... - Isha Goyal
1
我找到了问题。你应该删除这行代码 editDiv1.innerHTML += ' '; 这会使整个div被重新解析。你可以查看这个链接https://dev59.com/Z2gu5IYBdhLWcg3wLEM9。你可以尝试添加一个空元素或CSS来创建文本区域和按钮之间的间距。 - Trung Duong
3
在
0
尝试以下方法： 

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。
0

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中。将你的focus()函数放在appendChild()被调用之后。

 quesTextArea.innerHTML += quesEditText;
 var saveButton1=document.createElement("button");
 saveButton1.innerHTML="Save";
 editDiv1.appendChild(quesTextArea);
 quesTextArea.focus();
@IshaGoyal，尝试一下附带的代码片段。对我来说运行得很好。 - Sekar
0
setTimeout(function(){e.focus();}, 50);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接