Focus-in and Focus-out 'active' class add/remove behavior

Question

I have a function to add and remove the "active" class according to the behavior focus/click in a certain "input" class when focusin adds the class, when clicking outside it should remove it but it doesn't do it.

var inptxt = $('.form-component.input-text input')
$(inptxt').on('focusin', 
   function(){
     $(this).parent().addClass('active');
   }).on('focusout', function(){
     $(this).parent().removeClass('active');

  });

Thanks for your help!

Answer 1

Your code is correct. Just a few syntax errors in your code

 inptxt = $('.form-component.input-text input')  //  ;  end with semicolumn 

 $(inptxt')        //replace with $(inptxt)  

var inptxt = $('.form-component.input-text input');
$(inptxt).on('focusin', 
   function(){
     $(this).parent().addClass('active');
   }).on('focusout', function(){
     $(this).parent().removeClass('active');

  });

div.active {
  background-color:rgb(128, 128, 128);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-component input-text">
  <input type="text">
</div>