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

IT技术 javascript jquery cursor element caret
2021-01-28 04:25:00

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

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

6个回答
// 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 之前加上标签名称或其他选择器;否则,隐含了通用选择器(“*”)。换句话说,bare$(':focus')等价于$('*:focus')如果您正在寻找当前聚焦的元素, $( document.activeElement ) 将检索它而无需搜索整个 DOM 树。

答案是:

document.activeElement

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

$(document.activeElement)
@戴夫。你是什​​么意思“有插入符号”专注?鼠标在上面吗?
2021-03-15 04:25:00
我喜欢你如何使用 $ 前缀变量名,$focused因为我假设你这样做是为了表示 var 是一个 jquery 对象。TYVM。
2021-03-16 04:25:00
但是等等,我如何获得带有插入符号的元素?
2021-03-31 04:25:00
@戴夫。做不到。我认为只有 IE 具有此功能,但您现在问的是一个不同的问题,您应该在一个新问题中进行。
2021-04-01 04:25:00
这是我的情况:当我单击特定元素时,我想在最后一个聚焦的输入文本元素中放置一个字符。基本上是在单击该特定元素之前最后或恰好获得焦点的元素。
2021-04-03 04:25:00
$( document.activeElement )

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

如何获取带有插入符号的元素?
2021-04-13 04:25:00

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

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

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

我移入鼠标输入“名称”并按键盘上的 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>

试试这个:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});
@AndreasFurster 你是对的。在这个循环中总是只有一次迭代。这可能不是实现目标的最佳方式,但它确实有效。
2021-03-16 04:25:00
是的,这就是为什么这个循环只有一次迭代。alert 只是为了演示这个例子。如果你有这个变量,你可以用你想要的元素来做任何事情。
2021-04-06 04:25:00
查看已接受的答案以了解为什么这是最糟糕/效率最低的方法。(不必要的.each不容忍)
2021-04-07 04:25:00
怎么可能聚焦多个元素?
2021-04-12 04:25:00

怎么没人提。。

document.activeElement.id

我使用的是 IE8,还没有在任何其他浏览器上测试过。在我的例子中,我使用它来确保一个字段至少有 4 个字符,并且在执行之前聚焦。一旦您输入第 4 个数字,它就会触发。该字段的 ID 为“年”。我在用..

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