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

Question

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

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

Answer 1

// 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;

你应该使用哪一个？引用jQuery文档:

与其他伪类选择器(以":"开头的那些)一样,建议先于:使用标记名称或其他选择器进行聚焦; 否则,隐含通用选择器("*").换句话说,裸$(':focus')相当于$('*:focus').如果您正在寻找当前关注的元素,$(document.activeElement)将检索它而无需搜索整个DOM树.

答案是:

document.activeElement

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

$(document.activeElement)

Answer 2

$( document.activeElement )

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

Answer 3

我在Firefox,Chrome,IE9和Safari中测试了两种方法.

(1).$(document.activeElement)在Firefox,Chrome和Safari中按预期工作.

(2).$(':focus')在Firefox和Safari中按预期工作.

我移动鼠标输入'name'并在键盘上按Enter键,然后我尝试获得聚焦元素.

(1).$(document.activeElement)在Firefox,Chrome和Safari中返回输入:text:name,但它返回输入:在IE9中提交:addPassword

(2).$(':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>

Answer 4

试试这个:

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