I would like to change the background colour of the text input (.item-input) when I press a tab key or via mouse - for some reason focus is not firing?

For example:

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

If .item-input is selected via key or mouse

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

In the css file I have:

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

I would like to change the background colour of the text input (.item-input) when I press a tab key or via mouse - for some reason focus is not firing?

For example:

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

If .item-input is selected via key or mouse

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

In the css file I have:

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

• javascript
• jquery
• css

• Just use pure css developer.mozilla/en-US/docs/Web/CSS/:focus – epascarello Commented Feb 7, 2015 at 23:39

1 Answer 1

Use plain CSS:

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

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

But if you want to use jQuery, listen to the focus event:

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

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

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

I replaced the .addClass() method with the .toggleClass() method under the impression that you want the class removed on blur.