focus is not working on textarea

Question

I am creating a page in which a user can add a question and its solution, he can delete the problem and can also edit it dynamically using DOM in javascript. I want that whenever user clicks on edit button the textbox which appears get autofocus.

This the javascript code of my page...

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

I have tried to focus the textarea using quesTextArea.focus(); but its not working where questextArea is the name of the textarea. Please help how i can do it.

@Edison textarea has been created dynamically when edit button is clicked, and you are talking about the initial textarea when question is adding not when editing. — Isha Goyal, Feb 21 '17 at 08:11

Trung Duong · Accepted Answer · 2017-02-21T10:16:57.473

5

For the element could be got focused, it must be in the DOM when you invoke focus on it. You should invoke focus function after replaceChild function

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

I've created a simple sample as below link, you could check it
https://jsfiddle.net/pd9c6c7a/3/

edited Feb 21 '17 at 10:16

answered Feb 21 '17 at 08:57

Trung Duong

3,475
2
8
9

when textarea is not a child of some element it is working, but when it is a child (like in my case it is a child of a div element), and then replaceChild is called on div, there it is not working.. – Isha Goyal Feb 21 '17 at 09:34
I've edited my sample that have a text area be a child of a div, but it still working properly *https://jsfiddle.net/pd9c6c7a/3/*. I think the problem is not in the structure of these elements. Could you try to wrap focus function inside a setTimeout to check if it's working? *setTimeout(function(){quesTextArea.focus();}, 0);* – Trung Duong Feb 21 '17 at 09:50
when i appended a button to the same div and then tried to focus the textarea, its not working and i tried to do with setTimeout function, its not working... – Isha Goyal Feb 21 '17 at 09:56
1

I found the problem. You should remove this line of code editDiv1.innerHTML += ' '; It will make the whole div to be re-parsed. You could check this link http://stackoverflow.com/questions/11515383/why-is-element-innerhtml-bad-code. You could try to append an empty element or CSS to make the space between text area and button. – Trung Duong Feb 21 '17 at 10:16

score 3 · Answer 2 · answered Feb 21 '17 at 08:00

3

Add autofocus attribute to the textarea element. So that whenever it is appended to the DOM, will get cursor activated in it.

answered Feb 21 '17 at 08:00

brightDot

329
2
11

Sekar · Answer 3 · 2017-02-21T11:22:08.197

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>

The element must be in the DOM when you invoke the focus function. Move your focus() function after the appendChild() is invoked.

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

edited Feb 21 '17 at 11:22

answered Feb 21 '17 at 08:03

Sekar

377
3
21

@IshaGoyal, try the attached code snippet. It works fine for me – Sekar Feb 21 '17 at 11:22

score 0 · Answer 4 · answered Feb 21 '17 at 08:04

0

The 'textarea' has not been added to window to be shown, an element must be part of the document object tree. In case that didn't work, add a 50ms delay.

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

answered Feb 21 '17 at 08:04

Mac A.

103
8

score 0 · Answer 5 · answered Feb 21 '17 at 08:08

Try the following approach:

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>

Try to add preventDefault.

focus is not working on textarea

5 Answers5