Question

我看到很多问题都很接近，但似乎我错过了一些东西。

单击按钮时，我会附加一个html div标签。附加的div标签有一个textarea标签，应该得到焦点。

脚本：

$('.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();
}

我也尝试过：

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

html：

<div class="todosContainer">

</div>

Answer 1

您需要添加html的实例，您可以通过在jquery中附加预先创建的html来实现。在添加之前隐藏它，淡入它，等到完成并聚焦。

$('.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>

Answer 2

您正专注于课程attached。相反，你必须专注于textarea，即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();
});

Answer 3

我不知道为什么每个人都在使用'find'。这对我有用：

$('.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>

请注意，在你的问题中你错过了一个'）'，请确保你没有错过。此外，您将获得具有相同ID的无限文本框（每次点击） - 考虑为每次点击创建一个ID，并维护一个计数器。

Answer 4

attached是与包装器div关联的class。所以它不会集中精力。请尝试使用以下代码：

$('.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();
});

Answer 5

尝试find()。因为.attached div

的孩子

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

Answer 6

尝试代码：

＆＃13;

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

＆＃13;

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

＆＃13;

动态添加Textarea焦点（）不工作CHROME EXTENSION

6 个答案: