如何聚焦文本区域单击主类

How to focus textarea clicked main class

本文关键字：区域 单击 文本 何聚焦 聚焦      更新时间：2023-09-26

我创建了这个演示，当您单击文本区域时，您可以看到注释文本区域，然后.CinP背景颜色将发生变化。我也想在单击.CinP时，.Cj4Jbc文本区域将成为焦点。

我该怎么做？在这方面有人可以帮助我吗？

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

如果我正确理解了要求，那么这应该可以解决问题。工作代码笔

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

更新的代码笔

您可以使用focus()聚焦元素：

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

希望这有帮助。

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

怎么样 

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

纯 CSS 解决方案：

.CinP:hover {
   background: #fefefe;
} 
.CinP:hover .Cj4Jbc {
   border: 1px solid blue;
   box-shadow: inset 0 0 3px rgba(0, 0, 255, .5);
}
相关文章：