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

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：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是如果你想使用jQuery，请收听focus事件：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望在.addClass()上删除该类的情况下，使用.toggleClass()方法替换blur方法。