單擊外部輸入時不會失去焦點

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

我想你想做這樣的事情

1. 聚焦 - 將表單背景的顏色更改為 #fff(White)
2. 失焦 - 將表單背景更改為透明

$('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'
            });
    });
});

嘗試這個。