更改焦點上輸入元素的背景顏色

Question

我想在按Tab鍵或鼠標時更改文本輸入（ .item-input ）的背景顏色-由於某種原因，焦點沒有觸發？

例如：

<tr class="item">
     <td> <input class="item-input" type="text" /> </td>
     <td> <input class="option" type="text" /> </td>
</tr>

如果通過鍵或鼠標選擇了.item-input

if($('.item-input').is(':focus')) {
    $(this).addClass("input-focus");
}

在css文件中，我有：

.input-focus {
    background-color: yellow;
}

Answer 1

使用純CSS：

 .item-input:focus { background-color: yellow; } 

 <input class="item-input" type="text" /> 

但是，如果要使用jQuery，請聽focus事件：

 $('.item-input').on('focus blur', function() { $(this).toggleClass("input-focus"); }); 

 .input-focus { background-color: yellow; } 

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

我更換了.addClass()與方法.toggleClass()所需的類上取下的印象法blur 。