本文翻译自: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
}

如何使用jQuery获取焦点元素?相关推荐

  1. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  2. Javascript及Jquery获取元素节点以及添加和删除操作

    用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...

  3. jquery获取元素在文档中的位置信息以及滚动条位置(转)

    jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886     原文链接 原创 201 ...

  4. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  5. jquery 查询元素技巧

    jquery 查询元素技巧   $("div[id]")                查找所有含有 id 属性的div元素.  $("div[id='ajaxa']&q ...

  6. jquery获取元素宽高

    前言 jquery获取元素宽高 <!DOCTYPE html> <html lang="zh" > <head><meta charset ...

  7. jQuery 判断元素是否存在

    前言 jQuery v3.5.1 jQuery 查找元素 比如查找某个input元素$("input[name='email']"). 示例: <html> <h ...

  8. animate方法 jQuery中元素的创建 创建十个p标签 创建列表 动态创建列表

    animate方法 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

  9. c语言一个数组后添加元素append,jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等)...

    1. append & appendTo 的功能均为:在被选元素结尾(仍在元素内部)插入指定内容,但是内容和选择器的位置不同 (1) append()方法: $("#test&quo ...

最新文章

  1. netbeans使用小记
  2. React Router 黑笔记?
  3. 准备好做个硬核科技青年了么?| 【2019科技创新者大会】限时免费报名中
  4. 内置锁的能力不足以满足需求
  5. 4怎样判断动作是否执行_公众号交易时要怎样去判断粉丝是否真实的呢?
  6. 简单分析Guava中RateLimiter中的令牌桶算法的实现
  7. java 先进先出的map_「 深入浅出 」java集合Collection和Map
  8. navicat连接oracle 报 ORA-12737 set CHS16GBK
  9. 「机械」4大传动方式优劣对比:机械、电气、气压、液压
  10. Python数据结构与算法(二)--timeit模块
  11. centos7 下 的lamp 的安装原创详细教程
  12. C语言学习笔记---打印函数printf()和sprintf()函数
  13. linux中ldap管理工具,LDAP管理工具Mac版-LDAP Admin Tool for Mac下载 V7.2-PC6苹果网
  14. 中国气象数据(站点)
  15. Diss GitHub被收购?说不定是件大喜事呢!
  16. c语言魔方机器人编程软件下载,Coconut编程机器人软件
  17. Java-如何防止XSS攻击
  18. 最好的投资是投资自己:20本投资书单推荐
  19. 【学习笔记】ROS-移动机器人导航相关
  20. 阿里云服务器centos8系统安装Tomcat9

热门文章

  1. 5 个 Android 开发中比较常见的内存泄漏问题及解决办法
  2. python画樱桃小丸子的程序_多任务---线程threading使用总结。
  3. python分别统计男女人数_python实现爬虫统计学校BBS男女比例(一)
  4. rocketmq广播消息为什么不能重试_几分钟带你看懂“消息队列和RocketMQ”的入门总结
  5. Service应用场景分析
  6. Flutter开发之Stack组件(层叠布局)(19)
  7. Java蓝桥杯——贪心算法
  8. 【JPA】注解@PostConstruct、@PreDestroy
  9. 软工作业3: 词频统计
  10. JDBC——jdbcUtils加载配置文件赋值