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

Question

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

例如：

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

如果.item-輸入經由鍵或鼠標

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上刪除課程。