更改焦点上的输入元素的背景颜色

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上删除课程。