如何使用jQuery获取焦点元素？

本文翻译自：How to get the focused element with 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? 或者换句话说，如何确定输入是否具有插入符号的焦点？

---

#1楼

参考：https://stackoom.com/question/lJv3/如何使用jQuery获取焦点元素

---

#2楼

$( document.activeElement )

将检索它而无需按照jQuery文档中的建议搜索整个DOM树

---

#3楼

// 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') . 换句话说，裸$(':focus')相当于$('*:focus') 。 If you are looking for the currently focused element, $( document.activeElement ) will retrieve it without having to search the whole DOM tree. 如果您正在寻找当前关注的元素，$（document.activeElement）将检索它而无需搜索整个DOM树。

The answer is: 答案是：

document.activeElement

And if you want a jQuery object wrapping the element: 如果你想要一个包装元素的jQuery对象：

$(document.activeElement)

---

#4楼

Try this: 试试这个：

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

---

#5楼

I've tested two ways in Firefox, Chrome, IE9 and Safari. 我在Firefox，Chrome，IE9和Safari中测试了两种方法。

(1). （1）。 $(document.activeElement) works as expected in Firefox, Chrome and Safari. $(document.activeElement)在Firefox，Chrome和Safari中按预期工作。

(2). （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). （1）。 $(document.activeElement) returns the input:text:name as expected in Firefox, Chrome and Safari, but it returns input:submit:addPassword in IE9 $(document.activeElement)在Firefox，Chrome和Safari中返回输入：text：name，但它返回输入：在IE9中提交：addPassword

(2). （2）。 $(':focus') returns input:text:name as expected in Firefox and Safari, but nothing in IE $(':focus')返回输入：text：在Firefox和Safari中预期的名称，但在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>

---

#6楼

How is it noone has mentioned.. 怎么没人提到..

document.activeElement.id

I am using IE8, and have not tested it on any other browser. 我正在使用IE8，并没有在任何其他浏览器上测试它。 In my case, I am using it to make sure a field is a minimum of 4 characters and focused before acting. 在我的情况下，我正在使用它来确保一个字段至少4个字符并在表演之前集中注意力。 Once you enter the 4th number, it triggers. 输入第4个数字后，它会触发。 The field has an id of 'year'. 该字段的ID为“年份”。 I am using.. 我在用..

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