jQuery: how to know if input element has focus

Question

I am developing an application (game) which could be controlled using keyboard. The problem is that it also contains some default input elements (like login form fields). In order to prevent game reacting to keypresses when user enters their credentials, I do such a check:

if (isDef($("*:focus").attr("id")))
    return;

It works just great in almost all major browsers, but IE. In the Internet Explorer div's could also have focus on them and in almost every case some element on the page has focus on it. Thus, I want to check not if some element has focus, but some element, which can accept keyboard input has focus. In my case it's limited to textarea or input. How do I check if elements of those two types have focus?

Answer 1

You can do this easily by using jquery's is expression.

if($("input,textarea").is(":focus")){
//input and text area has focus
}
else{
//no focus for input and textarea
}    

if you want to check only textbox focus instead of every input element, then change input with input['text']

Answer 2

if ( $("*:focus").is("textarea, input") ) return;

Answer 3

Welcome to the Year 2015, where You don't need jQuery for this kind-of stuff. Vanilla JS supports HTMLELement.matches(Query:String)

so we can do something like,

var el = document.getElementById("El")
if(el.matches(":focus")) // true or false (You can use other CSS selectors too)

Answer 4

Here is my sample code example that will may help you.

 // add the "hover" class when got focus
 $('.icheckbox_square-green').focusin(function () {
     $(this).addClass('hover');
 });

 // Remove the "hover" class when lost focus
 $('.icheckbox_square-green').focusout(function () {
     $(this).removeClass('hover');
 });

Answer 5

An alternative "raw javascript" solution to your problem could be to utilize the element.tabIndex property.

canvas.tabIndex = 0;

This would allow you to use this

canvas.onkeydown = function(){
    ...
}

Instead of this

document.body.onkeydown = function(){
    ...
}

That way, to control the canvas, you must first focus it--just like a flash game.

When the canvas is not focused, it will not do anything. And you will be able to type into a nearby text field without interfering with the canvas.

You could also give some visual indication that the canvas is focused, using the :focus pseudo-selector in css:

canvas:focus{
    ...
}

I'm sure there's an equivalent property to tabIndex in jQuery. I'm also pretty sure that IE supports the tabIndex property itself.

---

Hope that helps