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

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" />

我用 .toggleClass() 方法替换了 .addClass() 方法，以为您希望在 blur 上删除该类.