Dynamically added focus Textarea () doesn't work CHROME EXTENSION
I have seen tons of questions that are close, but it seems that I am missing something.
I am adding html div tag on button click. The attached div tag has a textarea tag that should receive focus.
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've also tried:
$('.attached').fadeIn(400, function() {
$(this).find(">:first-child").focus();
});
html:
<div class="todosContainer">
</div>
source to share
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 that you are missing ")", which is in doubt, make sure you don't miss it. Plus, you'll get endless text boxes with the same ID (every click) - consider creating a per click ID and maintaining a counter.
source to share
You need an instance of the added html, you can do this by adding the preprocessed html with jquery. Hide it before adding it, fade it out, wait until it's finished 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>
source to share
You focus on the class attached
. Instead, you need 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();
});
source to share
attached
is the class
wrapper related div. Therefore, he will not be focused. Please use the 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();
});
source to share
Try the 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>
source to share