Dynamically added Textarea focus() not working CHROME EXTENSION

Question

I have seen tons of question that are close but it seems I am missing something.

I am appending an html div tag when a button is clicked. The appended div tag has a textarea tag that should get focus.

the script:

$('.todosContainer').on('click', '.ion-ios-close-outline', function () {
    let myTodoTemplate = `
                    <div class="oneTodoTemplate attached">
                        <textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea>
                    </div> `;

    $('.todosContainer').append(myTodoTemplate);
    $('.attached').fadeIn(400).first().focus();
}

I also tried:

$('.attached').fadeIn(400, function() {
    $(this).find(">:first-child").focus();
});

The html:

<div class="todosContainer">

</div>

score 2 · Answer 1 · answered Jun 01 '17 at 12:10

You need an instance of the added html, you can do it by appending precreated html with jquery. Before add hide it, fade it in, wait till finish and focus.

$('.todosContainer').on('click', '.add', function() {

  let myTodoTemplate = $('<div class="oneTodoTemplate attached"><textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea></div>');

  myTodoTemplate.hide();
  $('.todosContainer').append(myTodoTemplate);
  myTodoTemplate.fadeIn(400, function() {
    myTodoTemplate.find('textarea').focus();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="todosContainer"> <span class="add">ADD</span> </div>

score 1 · Answer 2 · answered Jun 01 '17 at 12:12

You are focusing on the class attached. Instead you have to focus on textarea i.e. todoInput

$('.todosContainer').on('click', '.attached', function() {
     let myTodoTemplate = $('<div class="oneTodoTemplate attached"><textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea></div>');
  myTodoTemplate.hide();
  $('.todosContainer').append(myTodoTemplate);
  myTodoTemplate.fadeIn(400, function() {
    myTodoTemplate.find('textarea').focus();
  })
    $(this).find("#todoInput").focus();
});

kabanus · Accepted Answer · 2017-06-01T12:26:06.043

1

I have no idea why everyone is using 'find'. This works for me:

$('.todosContainer').on('click', function () {
    let myTodoTemplate = `
                    <div class="oneTodoTemplate attached">
                        <textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea>
                    </div> `;

    $('.todosContainer').append(myTodoTemplate);
    $('#todoInput').fadeIn(400,function () {$('#todoInput').focus();})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="todosContainer">
Click me
</div>

Note you're missing a ')' in you're question, make sure you didn't miss that. Also, you will get infinite text boxes with the same ID this way (every click) - consider making an id per click, and maintaining a counter.

edited Jun 01 '17 at 12:26

answered Jun 01 '17 at 12:20

kabanus

24,623
6
41
74

Somehow none of these answers are working. It is a chrome extension... maybe that has some effect? Damn this frustrates me. – Walter Monecke Jun 01 '17 at 12:32
@WalterMonecke That's odd - when you run the snippet above it doesn't work? Try using mint chrome/firefox even edge. – kabanus Jun 01 '17 at 12:33
the snippet above works but not in the chrome extension. Maybe this is a bug? – Walter Monecke Jun 01 '17 at 12:37
@WalterMonecke That's my guess - the extension doesn't parse Javascript properly. Try activating the console before you run your code/some of the answers here - is there any error message? – kabanus Jun 01 '17 at 12:38
Chromes developers guides says that the search bar will always have the focus when opening a new tab page. I guess that is what blocking my code. See here: https://developer.chrome.com/extensions/override 'Don't rely on the page having the keyboard focus. The address bar always gets the focus first when the user creates a new tab.' – Walter Monecke Jun 01 '17 at 12:44
1

@WalterMonecke Does [this](https://stackoverflow.com/questions/9646772/chrome-extension-popup-textarea-focus) help? – kabanus Jun 01 '17 at 12:46
WOW! Thank you kind Sir! This piece of code works like magic: `if(location.search !== "?foo") { location.search = "?foo"; throw new Error; // load everything on the next page; // stop execution on this page }` – Walter Monecke Jun 01 '17 at 13:18

score 0 · Answer 4 · answered Jun 01 '17 at 12:07

attached is a class associated with wrapper div. So it will not get focused. Please try with following code:

$('.todosContainer').on('click', '.ion-ios-close-outline', function () {
    let myTodoTemplate = '
                    <div class="oneTodoTemplate attached">
                        <textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea>
                    </div> ';

    $('.todosContainer').append(myTodoTemplate);
    $('.attached').fadeIn(400).find("#todoInput").focus();
});

score 0 · Answer 5 · answered Jun 01 '17 at 12:08

0

Try with find() .Because its children of .attached div

     $('.todosContainer').on('click', '.attached', function() {
          $(this).find('textarea').focus();
          // or
          //$(this).find('#todoInput').focus();
        });

answered Jun 01 '17 at 12:08

prasanth

22,145
4
29
53

kari kalan · Answer 6 · 2017-06-01T12:57:25.793

Try Code:

.todosContainer
{
color:Red;
}
.attached
{
}
.oneTodoTemplate
{
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready( function(){

   

$('.todosContainer').click(function(){
     $('.todosContainer').fadeOut();
    var myTodoTemplate ='<div class="oneTodoTemplate attached"><textarea  id="todoInput" name="name" placeholder="what shall be done?" rows="1" ls="80"></textarea> </div>';

    $('.todosContainer').append(myTodoTemplate);
    $('#todoInput').first().focus();    
   
    $('.todosContainer').fadeIn(200);
   
   
  
    
});


});
</script>
<div class="todosContainer" >
click
</div>

Dynamically added Textarea focus() not working CHROME EXTENSION

6 Answers6