Question

所以问题是每次我在外部单击时，输入焦点始终保持我尝试了几个代码，但是它们对我没有用

$(document).ready(function(){
  $("input").focus(function(){
    const background = true;
    if(background == true){
      $('form').css({
       'background-color': '#fff',
       'transition': 'background-color 1s ease-out'
    });
    } 
    else {
      $('input').blur(function(){
        if(background == false){
          $('form').css({
            'background-color': 'transparent'
          });
        }
    })
  }
})});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-inline">
  <div class="input-group">
    <input type="text" class="form-control input" placeholder="How may we help you?">
    <div class="input-append">
      <button type="button" class="btn"><i class="fas fa-search"></i></button>
    </div>
  </div>
</form>

Answer 1

我想你想做这样的事情

聚焦时-将表单背景的颜色更改为#fff（白色）
不专心-将表单背景更改为透明

$('input').focus(function () {
    $('form').css({
        'background-color': '#fff',
        'transition': 'background-color 1s ease-out'
    });
});

$('input').blur(function () {
    $('form').css({
        'background-color': 'transparent'
    });
});

Answer 2

$(document).ready(function(){
   $("input").focus(function(){
       $('form').css({
          'background-color': '#fff',
          'transition': 'background-color 1s ease-out'
           });
    });

    $('input').blur(function(){
        $('form').css({
           'background-color': 'transparent'
            });
    });
});

尝试一下。

单击外部输入时无法失去焦点

2 个答案: