入力がフォーカスされているときにクラスを追加しない

Question

私はこれを持っています極端な単純なクリックイベント、inputがフォーカスされている場合は、inputにクラスを追加することになっています。

しかし、それはクラスを追加する必要はありません。私はjQueryライブラリを必ず含んでいますが、何も起こりません。

jQueryの：

$("body").on("click", function(){ 
    if($("input").is(":focus")){ 
     $(this).addClass("highlight-input"); 
    } else { 
     $(this).removeClass("highlight-input"); 
    } 
}); 

Answer 1

あなたがこの方法を使用する必要があります：あなたのコードで

$(document).ready(function() { 
    $("input").on("focus", function() { 
    $(this).addClass("highlight-input"); 
    }).on("blur", function() { 
    $(this).removeClass("highlight-input"); 
    }); 
}); 

Answer 2

を - thisはbody元素を示し、あなたが$(this).addClass("highlight-input");を使用するときは、にhighlight-inputクラスを追加body要素。

$("body").on("click", function(){ 
 
    if($("input").is(":focus")){ 
 
     debugger; 
 
     $(this).addClass("highlight-input"); 
 
    } else { 
 
     $(this).removeClass("highlight-input"); 
 
    } 
 
});

.highlight-input { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input />

これは、あなたが探しているものがより可能性が高いです。

$('input').on('focus', function() { 
 
    $(this).addClass("highlight-input"); 
 
}).on('blur', function() { 
 
    $(this).removeClass("highlight-input"); 
 
});

.highlight-input { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input />