Question

我创建了 DEMO ，当您点击textarea时，您可以看到评论textarea，然后.CinP背景颜色会发生变化。我也希望点击.CinP时.Cj4Jbc textarea将成为焦点。

我该怎么做？在这方面，任何人都可以帮助我吗？

HTML：

<div class="container">
   <div class="CinP">
      <img src="http://www.technobuffalo.com/wp-content/
                uploads/2015/01/neytiri-avatar-5824.jpg"
           class="FhCbmb" width="36px" height="36px" />
      <div class="SO1PZd">
         <div class="ejZfNc">
            <textarea class="Cj4Jbc" id="InXt10" placeholder="Comment"></textarea>
         </div>
         <div class="O0WRkf">SEND</div>
      </div>
   </div>
</div>

JS：

$(".CinP").focusin(function() {
    $(this).css("background-color", "#fefefe");
});

$(".CinP").focusout(function() {
    $(this).css("background-color", "#000000");
});

Answer 1

如果我正确理解了这个要求，那么这应该可以解决问题。 Working codepen

$(".CinP").click(function() {
     $(this).find('textarea.Cj4Jbc').focus();
});

Answer 2

<强> Updated Codepen

您可以使用focus()

来关注元素

$(".CinP").click(function() {
    $(".Cj4Jbc").focus();
});

希望这有帮助。

Answer 3

您似乎希望触发事件为focusin。也许你的页面导航需要这个，而不是简单的点击。为了使div.CinP本身具有可关注性，您应该为其添加tabindex属性。

怎么样

$(".CinP").focusin(function() {
   $(this).css("background-color", "#fefefe");
   $('.Cj4Jbc').focus();
});

Answer 4

纯CSS解决方案：

.CinP:hover {
   background: #fefefe;
} 

.CinP:hover .Cj4Jbc {
   border: 1px solid blue;
   box-shadow: inset 0 0 3px rgba(0, 0, 255, .5);
}

如何关注textarea点击的主要课程

4 个答案: