jQuery：如何知道input元素是否具有焦点

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?

它几乎适用于所有主流浏览器,但IE浏览器。在Internet Explorer中,div也可以专注于它们,几乎在每种情况下,页面上的某些元素都集中在它上面。因此,我想检查一些元素是否具有焦点,但是一些可以接受键盘输入的元素具有焦点。在我的情况下,它仅限于textarea或输入。如何检查这两种类型的元素是否具有焦点?

5 个解决方案

#1

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

您可以使用jquery的表达式轻松完成此操作。

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']

如果您只想检查文本框焦点而不是每个输入元素,则使用input ['text']更改输入

#2

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

#3

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

欢迎来到2015年,在这里你不需要jQuery这种东西。 Vanilla JS支持HTMLELement.matches(Query:String)

so we can do something like,

所以我们可以做点什么,

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

#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');
 });

#5

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

您的问题的另一种“原始javascript”解决方案可能是利用element.tabIndex属性。

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.

这样,要控制画布,你必须首先关注它 - 就像一个flash游戏。

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:

您还可以使用css中的:focus伪选择器给出画布聚焦的一些视觉指示:

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.

我确定jQuery中的tabIndex有一个等价的属性。我也很确定IE支持tabIndex属性本身。

Hope that helps

希望有所帮助

#1