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

Question

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

javascriptjqueryelementcaret

394

使用 jQuery，我该如何获取当前光标所在的输入框元素？

换句话说，如何判断一个输入框是否有光标焦点？

- dave

可能是重复的 https://dev59.com/jnNA5IYBdhLWcg3wbNM4 - bart s

可能是重复问题：https://dev59.com/0nRB5IYBdhLWcg3wxZ_Y#9875020 - Sam Shiles

8个回答

42

$( document.activeElement )

按照jQuery文档的建议，将不必搜索整个DOM树就可以检索它。

- Grilse

1

如何获取具有插入符号的元素？ - dave

6

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

(1). $(document.activeElement) 在Firefox、Chrome和Safari中的表现符合预期。

(2). $(':focus') 在Firefox和Safari中的表现符合预期。

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

(1). $(document.activeElement) 在Firefox、Chrome和Safari中返回input:text:name，但在IE9中返回input:submit:addPassword，与预期不符。

(2). $(':focus') 在Firefox和Safari中返回input:text: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>

- ucdream

5

试试这个：

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

- Adil Malik

是的，这就是为什么这个循环只会有一次迭代。警报只是为了演示例子。如果你有这个变量，你可以对想要的元素做任何事情。 - Adil Malik

如何聚焦多个元素？ - Andreas Furster

@AndreasFurster，你说得对。这个循环永远只会有一次迭代。这可能不是实现目标的最佳方式，但它可以工作。 - Adil Malik

请查看被接受的答案以了解为什么这是最糟糕/效率最低的方法（不考虑不必要的.each）。 - Brad Kent

3

怎么没有人提到过这个问题呢？

document.activeElement.id

我正在使用IE8浏览器，并且没有在其他浏览器上做过测试。在我的情况下，我使用它来确保一个字段最少为4个字符并在执行之前获得焦点。一旦输入第4个数字，就会触发它。该字段的id为“year”。我正在使用...

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

- Tom aka Sparky

.id 很可能在多个元素上未定义。 - aequalsb

1

如果您想确认焦点是否在元素上，则需使用以下代码：

if ($('#inputId').is(':focus')) {
    //your code
}

- Sandeep Singh

是的，还有另一种方法可以做到。这确实取决于您使用的 JQuery 版本 :( - Tom aka Sparky

1

$(':focus')[0]将会给你实际的元素。

$(':focus')将会给你一个元素数组，通常一次只有一个元素被聚焦，所以只有在某种情况下有多个元素被聚焦时才更好。

- Travis Heeter

1

尝试这个：

$(document).on("click",function(){
    alert(event.target);
    });

- Pudugurthi Ravindar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gdoron is supporting Monica · Accepted Answer

// 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')等同于$('*:focus')。如果你正在寻找当前聚焦的元素，$( document.activeElement )将检索它而无需搜索整个DOM树。

答案是:

document.activeElement

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

$(document.activeElement)