CODEWITHSUNDEEP
javascriptjquerycssonclick
AlwaysStudent
AlwaysStudent

Reputation: 1374

How to focus textarea clicked main class

I have created this DEMO you can see the comment textarea when you click the textarea then the .CinP background color will changing. I want also when clicked .CinP the .Cj4Jbc textarea will be focus.

How can i do that? Anyone can help me in this regard ?

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

Upvotes: 2

Views: 67

Answers (4)

Hemant Sen
Hemant Sen

Reputation: 1

Pure CSS solution:

.CinP:hover {
   background: #fefefe;
} 

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

Upvotes: 0

vinayakj
vinayakj

Reputation: 5681

If I understood the requirement correctly then this should do the trick. Working codepen

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

Upvotes: 1

alepeino
alepeino

Reputation: 9771

You seem to want the triggering event to be a focusin. Maybe your page navigation calls for this, instead of a simple click. In order to make the div.CinP itself focusable you should add to it a tabindex attribute.

How about 

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

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Updated Codepen

You could focus an element using focus() :

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

Hope this helps.

Upvotes: 0

Related Questions