如何使用jQuery获得焦点元素?

Using jQuery, how can I get the input element that has the caret's (cursor's) focus?

使用jQuery，如何获得具有插入符号(光标)焦点的输入元素?

Or in other words, how to determine if an input has the caret's focus?

或者换句话说，如何确定输入是否具有插入符号的焦点?

5 个解决方案

#1

630

// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

Which one should you use? quoting the jQuery docs:

你应该用哪个?引用jQuery文档:

As with other pseudo-class selectors (those that begin with a ":"), it is recommended to precede :focus with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':focus') is equivalent to $('*:focus'). If you are looking for the currently focused element, $( document.activeElement ) will retrieve it without having to search the whole DOM tree.

与其他伪类选择器(以“:”开头的)一样，建议优先使用标记名或其他选择器;否则，将隐含通用选择器(“*”)。换句话说，裸$(':focus')等同于$('*:focus')。如果您正在寻找当前关注的元素$(document)。activeElement)将检索它，而不必搜索整个DOM树。

The answer is:

答案是:

document.activeElement

And if you want a jQuery object wrapping the element:

如果您想要一个jQuery对象包装元素:

$(document.activeElement)

#2

$( document.activeElement )

Will retrieve it without having to search the whole DOM tree as recommended on the jQuery documentation

是否要检索它，而不必像jQuery文档中建议的那样搜索整个DOM树

#3

Try this:

试试这个:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});

#4

I've tested two ways in Firefox, Chrome, IE9 and Safari.

我在Firefox、Chrome、IE9和Safari中测试了两种方式。

(1). $(document.activeElement) works as expected in Firefox, Chrome and Safari.

$(document.activeElement)可以在Firefox、Chrome和Safari中正常工作。

(2). $(':focus') works as expected in Firefox and Safari.

$(':focus')可以在Firefox和Safari中正常工作。

I moved into the mouse to input 'name' and pressed Enter on keyboard, then I tried to get the focused element.

我移动到鼠标中输入“name”并按下键盘上的Enter键，然后尝试获取焦点元素。

(1). $(document.activeElement) returns the input:text:name as expected in Firefox, Chrome and Safari, but it returns input:submit:addPassword in IE9

(1). $(document.activeElement)返回在Firefox、Chrome和Safari中预期的输入:text:name，但返回输入:submit:addPassword in IE9

(2). $(':focus') returns input:text:name as expected in Firefox and Safari, but nothing in IE

$(':focus')返回输入:text: Firefox和Safari中的name，但IE中没有

<form action="">
    <div id="block-1" class="border">
        <h4>block-1</h4>
        <input type="text" value="enter name here" name="name"/>            
        <input type="button" value="Add name" name="addName"/>
    </div>
    <div id="block-2" class="border">
        <h4>block-2</h4>
        <input type="text" value="enter password here" name="password"/>            
        <input type="submit" value="Add password" name="addPassword"/>
    </div>
</form>

#5

How is it noone has mentioned..

没有人提起过这件事。

document.activeElement.id

I am using IE8, and have not tested it on any other browser. In my case, I am using it to make sure a field is a minimum of 4 characters and focused before acting. Once you enter the 4th number, it triggers. The field has an id of 'year'. I am using..

我正在使用IE8，还没有在其他浏览器上测试过。在我的例子中，我使用它来确保一个字段至少有4个字符，并且在表演之前集中精力。一旦你输入了第4个数字，它就会触发。该字段的id为“year”。我用. .

if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
    // action here
}

#1

630

// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;