聚焦和聚焦 'active' class add/remove 行为

Question

我有一个功能，当focusin添加class，在外部单击时应该将其移除，但它没有。

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

  });

感谢您的帮助！

Answer 1

您的逻辑似乎工作正常。您的问题中是否遗漏了可识别问题的内容？

$('.form-component.input-text input').on('focus', 
   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>

Answer 2

您的代码是正确的。您的代码中只有一些语法错误

 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>

聚焦和聚焦 'active' class add/remove 行为

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

jquery

class

onfocus

focusout